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

Merge pull request #728 from mirumee/add/taxes-per-product

Browse source 
Allow taxes to be configured per product
This commit is contained in:
Dominik Żegleń 2020-09-25 17:28:56 +02:00 committed by GitHub
commit b571eef598
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 2404 additions and 361 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -46,6 +46,7 @@ All notable, unreleased changes to this project will be documented in this file.
- Allow product variant to be set as default - #721 by @tomaszszymanski129
- Change plural form of "informations" to "information" strings across the app #722 by @mmarkusik
- Fix misaligned rich text draft controls - #725 by @orzechdev
- Allow taxes to be configured per product - #728 by @dominik-zeglen
## 2.10.1

15
locale/defaultMessages.json
View file

@ -4325,9 +4325,6 @@
"context": "product price",
"string": "Price"
},
"src_dot_products_dot_components_dot_ProductPricing_dot_3015886868": {
"string": "Charge taxes for this item"
},
"src_dot_products_dot_components_dot_ProductShipping_dot_1325966144": {
"context": "product shipping",
"string": "Shipping"
@ -4362,6 +4359,18 @@
"src_dot_products_dot_components_dot_ProductStocks_dot_849869830": {
"string": "Active inventory tracking will automatically calculate changes of stock"
},
"src_dot_products_dot_components_dot_ProductTaxes_dot_1943864488": {
"context": "checkbox",
"string": "Charge taxes on this product"
},
"src_dot_products_dot_components_dot_ProductTaxes_dot_2022558114": {
"context": "select tax ratte",
"string": "Tax Rate"
},
"src_dot_products_dot_components_dot_ProductTaxes_dot_2771905943": {
"context": "checkbox",
"string": "Override the product type's tax rate"
},
"src_dot_products_dot_components_dot_ProductUpdatePage_dot_2232321263": {
"context": "product publication date label",
"string": "will become published on {date}"

8
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -3,6 +3,7 @@ import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames";
import Downshift from "downshift";
import { filter } from "fuzzaldrin";
import React from "react";
@ -27,6 +28,7 @@ const useStyles = makeStyles(
export interface SingleAutocompleteSelectFieldProps
extends Partial<FetchMoreProps> {
add?: SingleAutocompleteActionType;
className?: string;
error?: boolean;
name: string;
displayValue: string;
@ -51,6 +53,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
const {
add,
allowCustomValues,
className,
choices,
disabled,
displayValue,
@ -122,7 +125,10 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
);
return (
<div className={classes.container} {...rest}>
<div
className={classNames(classes.container, className)}
{...rest}
>
<TextField
InputProps={{
...InputProps,

14
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
View file

@ -124,6 +124,8 @@ function getChoiceIndex(
return choiceIndex;
}
const sliceSize = 20;
const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFieldContentProps> = props => {
const {
add,
@ -147,6 +149,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
const anchor = React.useRef<HTMLDivElement>();
const scrollPosition = useElementScroll(anchor);
const [calledForMore, setCalledForMore] = React.useState(false);
const [slice, setSlice] = React.useState(sliceSize);
const scrolledToBottom = isScrolledToBottom(anchor, scrollPosition, offset);
@ -154,9 +157,18 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
if (!calledForMore && onFetchMore && scrolledToBottom) {
onFetchMore();
setCalledForMore(true);
} else if (scrolledToBottom) {
setSlice(slice => slice + sliceSize);
}
}, [scrolledToBottom]);
React.useEffect(() => {
setSlice(sliceSize);
anchor.current.scrollTo({
top: 0
});
}, [choices?.length]);
React.useEffect(() => {
if (calledForMore && !loading) {
setCalledForMore(false);
@ -219,7 +231,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
{choices.length > 0 && (!!add || displayCustomValue) && (
<Hr className={classes.hr} />
)}
{choices.map((suggestion, index) => {
{choices.slice(0, slice).map((suggestion, index) => {
const choiceIndex = getChoiceIndex(
index,
emptyOption,

8
src/fragments/products.ts
View file

@ -1,6 +1,7 @@
import gql from "graphql-tag";
import { metadataFragment } from "./metadata";
import { taxTypeFragment } from "./taxes";
import { weightFragment } from "./weight";
export const stockFragment = gql`
@ -107,6 +108,7 @@ export const productFragmentDetails = gql`
${stockFragment}
${weightFragment}
${metadataFragment}
${taxTypeFragment}
fragment Product on Product {
...ProductVariantAttributesFragment
...MetadataFragment
@ -176,10 +178,16 @@ export const productFragmentDetails = gql`
id
name
hasVariants
taxType {
...TaxTypeFragment
}
}
weight {
...WeightFragment
}
taxType {
...TaxTypeFragment
}
availableForPurchase
visibleInListings
}

6
src/fragments/taxes.ts
View file

@ -26,3 +26,9 @@ export const shopTaxesFragment = gql`
displayGrossPrices
}
`;
export const taxTypeFragment = gql`
fragment TaxTypeFragment on TaxType {
description
taxCode
}
`;

14
src/fragments/types/Product.ts
View file

@ -52,12 +52,19 @@ export interface Product_productType_variantAttributes {
values: (Product_productType_variantAttributes_values | null)[] | null;
}
export interface Product_productType_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface Product_productType {
__typename: "ProductType";
id: string;
variantAttributes: (Product_productType_variantAttributes | null)[] | null;
name: string;
hasVariants: boolean;
taxType: Product_productType_taxType | null;
}
export interface Product_pricing_priceRangeUndiscounted_start_gross {
@ -191,6 +198,12 @@ export interface Product_weight {
value: number;
}
export interface Product_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface Product {
__typename: "Product";
id: string;
@ -216,6 +229,7 @@ export interface Product {
images: (Product_images | null)[] | null;
variants: (Product_variants | null)[] | null;
weight: Product_weight | null;
taxType: Product_taxType | null;
availableForPurchase: any | null;
visibleInListings: boolean;
}

13
src/fragments/types/TaxTypeFragment.ts Normal file
View file

@ -0,0 +1,13 @@
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.
// ====================================================
// GraphQL fragment: TaxTypeFragment
// ====================================================
export interface TaxTypeFragment {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}

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

@ -11,6 +11,7 @@ import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import SeoForm from "@saleor/components/SeoForm";
import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
import { TaxTypeFragment } from "@saleor/fragments/types/TaxTypeFragment";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import useFormset from "@saleor/hooks/useFormset";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
@ -46,24 +47,27 @@ import ProductOrganization from "../ProductOrganization";
import ProductPricing from "../ProductPricing";
import ProductShipping from "../ProductShipping/ProductShipping";
import ProductStocks, { ProductStockInput } from "../ProductStocks";
import ProductTaxes from "../ProductTaxes";
interface FormData extends MetadataFormData {
availableForPurchase: string;
basePrice: number;
publicationDate: string;
category: string;
collections: string[];
changeTaxCode: boolean;
chargeTaxes: boolean;
collections: string[];
description: RawDraftContentState;
isAvailable: boolean;
isAvailableForPurchase: boolean;
isPublished: boolean;
name: string;
productType: string;
publicationDate: string;
seoDescription: string;
seoTitle: string;
sku: string;
stockQuantity: number;
taxCode: string;
trackInventory: boolean;
visibleInListings: boolean;
weight: string;
@ -92,6 +96,7 @@ interface ProductCreatePageProps {
saveButtonBarState: ConfirmButtonTransitionState;
weightUnit: string;
warehouses: SearchWarehouses_search_edges_node[];
taxTypes: TaxTypeFragment[];
fetchCategories: (data: string) => void;
fetchCollections: (data: string) => void;
fetchProductTypes: (data: string) => void;
@ -114,6 +119,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
productTypes: productTypeChoiceList,
saveButtonBarState,
warehouses,
taxTypes,
onBack,
fetchProductTypes,
weightUnit,
@ -148,6 +154,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
availableForPurchase: "",
basePrice: 0,
category: "",
changeTaxCode: false,
chargeTaxes: false,
collections: [],
description: {} as any,
@ -163,6 +170,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
seoTitle: "",
sku: null,
stockQuantity: null,
taxCode: null,
trackInventory: false,
visibleInListings: false,
weight: ""
@ -180,10 +188,16 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
>([]);
const [productType, setProductType] = React.useState<ProductType>(null);
const [selectedTaxType, setSelectedTaxType] = useStateFromProps(null);
const categories = getChoices(categoryChoiceList);
const collections = getChoices(collectionChoiceList);
const productTypes = getChoices(productTypeChoiceList);
const taxTypeChoices =
taxTypes?.map(taxType => ({
label: taxType.description,
value: taxType.taxCode
})) || [];
const handleSubmit = (data: FormData) =>
onSubmit({
@ -228,6 +242,11 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
setProductType,
productTypeChoiceList
);
const handleTaxTypeSelect = createSingleAutocompleteSelectHandler(
change,
setSelectedTaxType,
taxTypeChoices
);
const changeMetadata = makeMetadataChangeHandler(change);
@ -367,6 +386,15 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
}}
onChange={change}
/>
<CardSpacer />
<ProductTaxes
data={data}
disabled={disabled}
onChange={change}
onTaxTypeChange={handleTaxTypeSelect}
selectedTaxTypeDisplayName={selectedTaxType}
taxTypes={taxTypes}
/>
</div>
</Grid>
<SaveButtonBar

14
src/products/components/ProductPricing/ProductPricing.tsx
View file

@ -2,7 +2,6 @@ import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import { makeStyles } from "@material-ui/core/styles";
import CardTitle from "@saleor/components/CardTitle";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import PriceField from "@saleor/components/PriceField";
import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
@ -23,7 +22,6 @@ const useStyles = makeStyles(
interface ProductPricingProps {
currency?: string;
data: {
chargeTaxes: boolean;
basePrice: number;
};
disabled: boolean;
@ -46,17 +44,7 @@ const ProductPricing: React.FC<ProductPricingProps> = props => {
defaultMessage: "Pricing",
description: "product pricing"
})}
>
<ControlledCheckbox
name="chargeTaxes"
label={intl.formatMessage({
defaultMessage: "Charge taxes for this item"
})}
checked={data.chargeTaxes}
onChange={onChange}
disabled={disabled}
/>
</CardTitle>
/>
<CardContent>
<div className={classes.root}>
<PriceField

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

@ -21,13 +21,13 @@ 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 { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
import { FormChange } from "@saleor/hooks/useForm";
import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
import { renderCollection } from "@saleor/misc";
import { ICONBUTTON_SIZE } from "@saleor/theme";
import { UserError } from "@saleor/types";
import { getFieldError } from "@saleor/utils/errors";
import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -40,7 +40,7 @@ export interface ProductStockFormData {
export interface ProductStocksProps {
data: ProductStockFormData;
disabled: boolean;
errors: UserError[];
errors: ProductErrorFragment[];
stocks: ProductStockInput[];
warehouses: WarehouseFragment[];
onChange: FormsetChange;
@ -121,6 +121,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
const warehousesToAssign = warehouses.filter(
warehouse => !stocks.some(stock => stock.id === warehouse.id)
);
const formErrors = getFormErrors(["sku"], errors);
return (
<Card>
@ -135,9 +136,9 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
<div className={classes.skuInputContainer}>
<TextField
disabled={disabled}
error={!!getFieldError(errors, "sku")}
error={!!formErrors.sku}
fullWidth
helperText={getFieldError(errors, "sku")?.message}
helperText={getProductErrorMessage(formErrors.sku, intl)}
label={intl.formatMessage({
defaultMessage: "SKU (Stock Keeping Unit)"
})}

112
src/products/components/ProductTaxes/ProductTaxes.tsx Normal file
View file

@ -0,0 +1,112 @@
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import makeStyles from "@material-ui/core/styles/makeStyles";
import CardTitle from "@saleor/components/CardTitle";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import Hr from "@saleor/components/Hr";
import SingleAutocompleteSelectField from "@saleor/components/SingleAutocompleteSelectField";
import { TaxTypeFragment } from "@saleor/fragments/types/TaxTypeFragment";
import { FormChange } from "@saleor/hooks/useForm";
import { sectionNames } from "@saleor/intl";
import React from "react";
import { useIntl } from "react-intl";
export interface ProductTaxesProps {
data: {
changeTaxCode: boolean;
chargeTaxes: boolean;
taxCode: string;
};
disabled: boolean;
selectedTaxTypeDisplayName: string;
taxTypes: TaxTypeFragment[];
onChange: FormChange;
onTaxTypeChange: FormChange;
}
const useStyles = makeStyles(
theme => ({
content: {
paddingTop: theme.spacing(2)
},
hr: {
margin: theme.spacing(2, 0)
},
select: {
margin: theme.spacing(2, 0)
}
}),
{
name: "ProductTaxes"
}
);
const ProductTaxes: React.FC<ProductTaxesProps> = ({
data,
disabled,
selectedTaxTypeDisplayName,
taxTypes,
onChange,
onTaxTypeChange
}) => {
const intl = useIntl();
const classes = useStyles({});
return (
<Card>
<CardTitle title={intl.formatMessage(sectionNames.taxes)} />
<CardContent className={classes.content}>
<ControlledCheckbox
checked={data.changeTaxCode}
disabled={disabled}
data-test="override-tax-type"
label={intl.formatMessage({
defaultMessage: "Override the product type's tax rate",
description: "checkbox"
})}
name="changeTaxCode"
onChange={onChange}
/>
<Hr className={classes.hr} />
<ControlledCheckbox
checked={data.chargeTaxes}
disabled={disabled}
data-test="charge-taxes"
label={intl.formatMessage({
defaultMessage: "Charge taxes on this product",
description: "checkbox"
})}
name="chargeTaxes"
onChange={onChange}
/>
{data.changeTaxCode && (
<SingleAutocompleteSelectField
className={classes.select}
disabled={disabled}
displayValue={selectedTaxTypeDisplayName}
data-test="select-tax-type"
label={intl.formatMessage({
defaultMessage: "Tax Rate",
description: "select tax ratte"
})}
name="taxCode"
onChange={onTaxTypeChange}
value={data.taxCode}
choices={
taxTypes?.map(taxType => ({
label: taxType.description,
value: taxType.taxCode
})) || []
}
InputProps={{
autoComplete: "off"
}}
/>
)}
</CardContent>
</Card>
);
};
ProductTaxes.displayName = "ProductTaxes";
export default ProductTaxes;

2
src/products/components/ProductTaxes/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./ProductTaxes";
export { default } from "./ProductTaxes";

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

@ -10,6 +10,7 @@ import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import SeoForm from "@saleor/components/SeoForm";
import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
import { TaxTypeFragment } from "@saleor/fragments/types/TaxTypeFragment";
import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import useFormset from "@saleor/hooks/useFormset";
@ -52,6 +53,7 @@ import ProductOrganization from "../ProductOrganization";
import ProductPricing from "../ProductPricing";
import ProductShipping from "../ProductShipping/ProductShipping";
import ProductStocks, { ProductStockInput } from "../ProductStocks";
import ProductTaxes from "../ProductTaxes";
import ProductVariants from "../ProductVariants";
export interface ProductUpdatePageProps extends ListActions {
@ -69,6 +71,7 @@ export interface ProductUpdatePageProps extends ListActions {
header: string;
saveButtonBarState: ConfirmButtonTransitionState;
warehouses: WarehouseFragment[];
taxTypes: TaxTypeFragment[];
fetchCategories: (query: string) => void;
fetchCollections: (query: string) => void;
onVariantsAdd: () => void;
@ -111,6 +114,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
saveButtonBarState,
variants,
warehouses,
taxTypes,
onBack,
onDelete,
onImageDelete,
@ -161,6 +165,10 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
getChoices(maybe(() => product.collections, []))
);
const [selectedTaxType, setSelectedTaxType] = useStateFromProps(
product?.taxType.description
);
const {
isMetadataModified,
isPrivateMetadataModified,
@ -177,6 +185,11 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
const currency =
product?.variants?.length && product.variants[0].price.currency;
const hasVariants = maybe(() => product.productType.hasVariants, false);
const taxTypeChoices =
taxTypes?.map(taxType => ({
label: taxType.description,
value: taxType.taxCode
})) || [];
const handleSubmit = (data: ProductUpdatePageFormData) => {
const metadata = isMetadataModified ? data.metadata : undefined;
@ -246,6 +259,11 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
triggerChange
);
const changeMetadata = makeMetadataChangeHandler(change);
const handleTaxTypeSelect = createSingleAutocompleteSelectHandler(
change,
setSelectedTaxType,
taxTypeChoices
);
return (
<>
@ -419,6 +437,15 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
}}
onChange={change}
/>
<CardSpacer />
<ProductTaxes
data={data}
disabled={disabled}
selectedTaxTypeDisplayName={selectedTaxType}
taxTypes={taxTypes}
onChange={change}
onTaxTypeChange={handleTaxTypeSelect}
/>
</div>
</Grid>
<SaveButtonBar

12
src/products/fixtures.ts
View file

@ -206,8 +206,11 @@ export const product: (
hasVariants: true,
id: "pt76406",
name: "Versatile",
seoDescription: "Omnis rerum ea. Fugit dignissimos modi est rerum",
seoTitle: "Ergonomic Plastic Bacon",
taxType: {
__typename: "TaxType",
description: "standard",
taxCode: "standard"
},
variantAttributes: [
{
__typename: "Attribute",
@ -254,6 +257,11 @@ export const product: (
seoDescription: "Seo description",
seoTitle: "Seo title",
sku: "59661-34207",
taxType: {
__typename: "TaxType",
description: "standard",
taxCode: "standard"
},
thumbnail: { __typename: "Image" as "Image", url: placeholderImage },
url: "/example-url",
variants: [

103
src/products/mutations.ts
View file

@ -161,36 +161,8 @@ export const useProductVariantSetDefaultMutation = makeMutation<
export const productUpdateMutation = gql`
${productErrorFragment}
${productFragmentDetails}
mutation ProductUpdate(
$id: ID!
$attributes: [AttributeValueInput]
$publicationDate: Date
$category: ID
$chargeTaxes: Boolean!
$collections: [ID]
$descriptionJson: JSONString
$isPublished: Boolean!
$name: String
$basePrice: PositiveDecimal
$seo: SeoInput
$visibleInListings: Boolean
) {
productUpdate(
id: $id
input: {
attributes: $attributes
publicationDate: $publicationDate
category: $category
chargeTaxes: $chargeTaxes
collections: $collections
descriptionJson: $descriptionJson
isPublished: $isPublished
name: $name
basePrice: $basePrice
seo: $seo
visibleInListings: $visibleInListings
}
) {
mutation ProductUpdate($id: ID!, $input: ProductInput!) {
productUpdate(id: $id, input: $input) {
errors: productErrors {
...ProductErrorFragment
}
@ -213,41 +185,14 @@ export const simpleProductUpdateMutation = gql`
${fragmentVariant}
mutation SimpleProductUpdate(
$id: ID!
$attributes: [AttributeValueInput]
$publicationDate: Date
$category: ID
$chargeTaxes: Boolean!
$collections: [ID]
$descriptionJson: JSONString
$isPublished: Boolean!
$name: String
$basePrice: PositiveDecimal
$input: ProductInput!
$productVariantId: ID!
$productVariantInput: ProductVariantInput!
$seo: SeoInput
$addStocks: [StockInput!]!
$deleteStocks: [ID!]!
$updateStocks: [StockInput!]!
$weight: WeightScalar
$visibleInListings: Boolean
) {
productUpdate(
id: $id
input: {
attributes: $attributes
publicationDate: $publicationDate
category: $category
chargeTaxes: $chargeTaxes
collections: $collections
descriptionJson: $descriptionJson
isPublished: $isPublished
name: $name
basePrice: $basePrice
seo: $seo
weight: $weight
visibleInListings: $visibleInListings
}
) {
productUpdate(id: $id, input: $input) {
errors: productErrors {
...ProductErrorFragment
}
@ -306,44 +251,8 @@ export const useSimpleProductUpdateMutation = makeMutation<
export const productCreateMutation = gql`
${productErrorFragment}
${productFragmentDetails}
mutation ProductCreate(
$attributes: [AttributeValueInput]
$publicationDate: Date
$category: ID!
$chargeTaxes: Boolean!
$collections: [ID]
$descriptionJson: JSONString
$isPublished: Boolean!
$name: String!
$basePrice: PositiveDecimal
$productType: ID!
$sku: String
$seo: SeoInput
$stocks: [StockInput!]!
$trackInventory: Boolean!
$weight: WeightScalar
$visibleInListings: Boolean
) {
productCreate(
input: {
attributes: $attributes
publicationDate: $publicationDate
category: $category
chargeTaxes: $chargeTaxes
collections: $collections
descriptionJson: $descriptionJson
isPublished: $isPublished
name: $name
basePrice: $basePrice
productType: $productType
sku: $sku
seo: $seo
stocks: $stocks
trackInventory: $trackInventory
weight: $weight
visibleInListings: $visibleInListings
}
) {
mutation ProductCreate($input: ProductCreateInput!) {
productCreate(input: $input) {
errors: productErrors {
...ProductErrorFragment
}

5
src/products/queries.ts
View file

@ -6,6 +6,7 @@ import {
productFragmentDetails,
productVariantAttributesFragment
} from "@saleor/fragments/products";
import { taxTypeFragment } from "@saleor/fragments/taxes";
import { warehouseFragment } from "@saleor/fragments/warehouses";
import makeQuery from "@saleor/hooks/makeQuery";
import gql from "graphql-tag";
@ -166,10 +167,14 @@ export const useCountAllProducts = makeQuery<CountAllProducts, null>(
const productDetailsQuery = gql`
${productFragmentDetails}
${taxTypeFragment}
query ProductDetails($id: ID!) {
product(id: $id) {
...Product
}
taxTypes {
...TaxTypeFragment
}
}
`;
export const useProductDetails = makeQuery<

33
src/products/types/ProductCreate.ts
View file

@ -2,7 +2,7 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { AttributeValueInput, SeoInput, StockInput, ProductErrorCode, AttributeInputTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
import { ProductCreateInput, ProductErrorCode, AttributeInputTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: ProductCreate
@ -58,12 +58,19 @@ export interface ProductCreate_productCreate_product_productType_variantAttribut
values: (ProductCreate_productCreate_product_productType_variantAttributes_values | null)[] | null;
}
export interface ProductCreate_productCreate_product_productType_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductCreate_productCreate_product_productType {
__typename: "ProductType";
id: string;
variantAttributes: (ProductCreate_productCreate_product_productType_variantAttributes | null)[] | null;
name: string;
hasVariants: boolean;
taxType: ProductCreate_productCreate_product_productType_taxType | null;
}
export interface ProductCreate_productCreate_product_pricing_priceRangeUndiscounted_start_gross {
@ -197,6 +204,12 @@ export interface ProductCreate_productCreate_product_weight {
value: number;
}
export interface ProductCreate_productCreate_product_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductCreate_productCreate_product {
__typename: "Product";
id: string;
@ -222,6 +235,7 @@ export interface ProductCreate_productCreate_product {
images: (ProductCreate_productCreate_product_images | null)[] | null;
variants: (ProductCreate_productCreate_product_variants | null)[] | null;
weight: ProductCreate_productCreate_product_weight | null;
taxType: ProductCreate_productCreate_product_taxType | null;
availableForPurchase: any | null;
visibleInListings: boolean;
}
@ -237,20 +251,5 @@ export interface ProductCreate {
}
export interface ProductCreateVariables {
attributes?: (AttributeValueInput | null)[] | null;
publicationDate?: any | null;
category: string;
chargeTaxes: boolean;
collections?: (string | null)[] | null;
descriptionJson?: any | null;
isPublished: boolean;
name: string;
basePrice?: any | null;
productType: string;
sku?: string | null;
seo?: SeoInput | null;
stocks: StockInput[];
trackInventory: boolean;
weight?: any | null;
visibleInListings?: boolean | null;
input: ProductCreateInput;
}

21
src/products/types/ProductDetails.ts
View file

@ -52,12 +52,19 @@ export interface ProductDetails_product_productType_variantAttributes {
values: (ProductDetails_product_productType_variantAttributes_values | null)[] | null;
}
export interface ProductDetails_product_productType_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductDetails_product_productType {
__typename: "ProductType";
id: string;
variantAttributes: (ProductDetails_product_productType_variantAttributes | null)[] | null;
name: string;
hasVariants: boolean;
taxType: ProductDetails_product_productType_taxType | null;
}
export interface ProductDetails_product_pricing_priceRangeUndiscounted_start_gross {
@ -191,6 +198,12 @@ export interface ProductDetails_product_weight {
value: number;
}
export interface ProductDetails_product_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductDetails_product {
__typename: "Product";
id: string;
@ -216,12 +229,20 @@ export interface ProductDetails_product {
images: (ProductDetails_product_images | null)[] | null;
variants: (ProductDetails_product_variants | null)[] | null;
weight: ProductDetails_product_weight | null;
taxType: ProductDetails_product_taxType | null;
availableForPurchase: any | null;
visibleInListings: boolean;
}
export interface ProductDetails_taxTypes {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductDetails {
product: ProductDetails_product | null;
taxTypes: (ProductDetails_taxTypes | null)[] | null;
}
export interface ProductDetailsVariables {

14
src/products/types/ProductImageCreate.ts
View file

@ -58,12 +58,19 @@ export interface ProductImageCreate_productImageCreate_product_productType_varia
values: (ProductImageCreate_productImageCreate_product_productType_variantAttributes_values | null)[] | null;
}
export interface ProductImageCreate_productImageCreate_product_productType_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductImageCreate_productImageCreate_product_productType {
__typename: "ProductType";
id: string;
variantAttributes: (ProductImageCreate_productImageCreate_product_productType_variantAttributes | null)[] | null;
name: string;
hasVariants: boolean;
taxType: ProductImageCreate_productImageCreate_product_productType_taxType | null;
}
export interface ProductImageCreate_productImageCreate_product_pricing_priceRangeUndiscounted_start_gross {
@ -197,6 +204,12 @@ export interface ProductImageCreate_productImageCreate_product_weight {
value: number;
}
export interface ProductImageCreate_productImageCreate_product_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductImageCreate_productImageCreate_product {
__typename: "Product";
id: string;
@ -222,6 +235,7 @@ export interface ProductImageCreate_productImageCreate_product {
images: (ProductImageCreate_productImageCreate_product_images | null)[] | null;
variants: (ProductImageCreate_productImageCreate_product_variants | null)[] | null;
weight: ProductImageCreate_productImageCreate_product_weight | null;
taxType: ProductImageCreate_productImageCreate_product_taxType | null;
availableForPurchase: any | null;
visibleInListings: boolean;
}

14
src/products/types/ProductImageUpdate.ts
View file

@ -58,12 +58,19 @@ export interface ProductImageUpdate_productImageUpdate_product_productType_varia
values: (ProductImageUpdate_productImageUpdate_product_productType_variantAttributes_values | null)[] | null;
}
export interface ProductImageUpdate_productImageUpdate_product_productType_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductImageUpdate_productImageUpdate_product_productType {
__typename: "ProductType";
id: string;
variantAttributes: (ProductImageUpdate_productImageUpdate_product_productType_variantAttributes | null)[] | null;
name: string;
hasVariants: boolean;
taxType: ProductImageUpdate_productImageUpdate_product_productType_taxType | null;
}
export interface ProductImageUpdate_productImageUpdate_product_pricing_priceRangeUndiscounted_start_gross {
@ -197,6 +204,12 @@ export interface ProductImageUpdate_productImageUpdate_product_weight {
value: number;
}
export interface ProductImageUpdate_productImageUpdate_product_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductImageUpdate_productImageUpdate_product {
__typename: "Product";
id: string;
@ -222,6 +235,7 @@ export interface ProductImageUpdate_productImageUpdate_product {
images: (ProductImageUpdate_productImageUpdate_product_images | null)[] | null;
variants: (ProductImageUpdate_productImageUpdate_product_variants | null)[] | null;
weight: ProductImageUpdate_productImageUpdate_product_weight | null;
taxType: ProductImageUpdate_productImageUpdate_product_taxType | null;
availableForPurchase: any | null;
visibleInListings: boolean;
}

28
src/products/types/ProductUpdate.ts
View file

@ -2,7 +2,7 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { AttributeValueInput, SeoInput, ProductErrorCode, AttributeInputTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
import { ProductInput, ProductErrorCode, AttributeInputTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: ProductUpdate
@ -58,12 +58,19 @@ export interface ProductUpdate_productUpdate_product_productType_variantAttribut
values: (ProductUpdate_productUpdate_product_productType_variantAttributes_values | null)[] | null;
}
export interface ProductUpdate_productUpdate_product_productType_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductUpdate_productUpdate_product_productType {
__typename: "ProductType";
id: string;
variantAttributes: (ProductUpdate_productUpdate_product_productType_variantAttributes | null)[] | null;
name: string;
hasVariants: boolean;
taxType: ProductUpdate_productUpdate_product_productType_taxType | null;
}
export interface ProductUpdate_productUpdate_product_pricing_priceRangeUndiscounted_start_gross {
@ -197,6 +204,12 @@ export interface ProductUpdate_productUpdate_product_weight {
value: number;
}
export interface ProductUpdate_productUpdate_product_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductUpdate_productUpdate_product {
__typename: "Product";
id: string;
@ -222,6 +235,7 @@ export interface ProductUpdate_productUpdate_product {
images: (ProductUpdate_productUpdate_product_images | null)[] | null;
variants: (ProductUpdate_productUpdate_product_variants | null)[] | null;
weight: ProductUpdate_productUpdate_product_weight | null;
taxType: ProductUpdate_productUpdate_product_taxType | null;
availableForPurchase: any | null;
visibleInListings: boolean;
}
@ -238,15 +252,5 @@ export interface ProductUpdate {
export interface ProductUpdateVariables {
id: string;
attributes?: (AttributeValueInput | null)[] | null;
publicationDate?: any | null;
category?: string | null;
chargeTaxes: boolean;
collections?: (string | null)[] | null;
descriptionJson?: any | null;
isPublished: boolean;
name?: string | null;
basePrice?: any | null;
seo?: SeoInput | null;
visibleInListings?: boolean | null;
input: ProductInput;
}

14
src/products/types/ProductVariantReorder.ts
View file

@ -58,12 +58,19 @@ export interface ProductVariantReorder_productVariantReorder_product_productType
values: (ProductVariantReorder_productVariantReorder_product_productType_variantAttributes_values | null)[] | null;
}
export interface ProductVariantReorder_productVariantReorder_product_productType_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductVariantReorder_productVariantReorder_product_productType {
__typename: "ProductType";
id: string;
variantAttributes: (ProductVariantReorder_productVariantReorder_product_productType_variantAttributes | null)[] | null;
name: string;
hasVariants: boolean;
taxType: ProductVariantReorder_productVariantReorder_product_productType_taxType | null;
}
export interface ProductVariantReorder_productVariantReorder_product_pricing_priceRangeUndiscounted_start_gross {
@ -197,6 +204,12 @@ export interface ProductVariantReorder_productVariantReorder_product_weight {
value: number;
}
export interface ProductVariantReorder_productVariantReorder_product_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface ProductVariantReorder_productVariantReorder_product {
__typename: "Product";
id: string;
@ -222,6 +235,7 @@ export interface ProductVariantReorder_productVariantReorder_product {
images: (ProductVariantReorder_productVariantReorder_product_images | null)[] | null;
variants: (ProductVariantReorder_productVariantReorder_product_variants | null)[] | null;
weight: ProductVariantReorder_productVariantReorder_product_weight | null;
taxType: ProductVariantReorder_productVariantReorder_product_taxType | null;
availableForPurchase: any | null;
visibleInListings: boolean;
}

29
src/products/types/SimpleProductUpdate.ts
View file

@ -2,7 +2,7 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { AttributeValueInput, ProductVariantInput, SeoInput, StockInput, ProductErrorCode, AttributeInputTypeEnum, WeightUnitsEnum, StockErrorCode } from "./../../types/globalTypes";
import { ProductInput, ProductVariantInput, StockInput, ProductErrorCode, AttributeInputTypeEnum, WeightUnitsEnum, StockErrorCode } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: SimpleProductUpdate
@ -58,12 +58,19 @@ export interface SimpleProductUpdate_productUpdate_product_productType_variantAt
values: (SimpleProductUpdate_productUpdate_product_productType_variantAttributes_values | null)[] | null;
}
export interface SimpleProductUpdate_productUpdate_product_productType_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface SimpleProductUpdate_productUpdate_product_productType {
__typename: "ProductType";
id: string;
variantAttributes: (SimpleProductUpdate_productUpdate_product_productType_variantAttributes | null)[] | null;
name: string;
hasVariants: boolean;
taxType: SimpleProductUpdate_productUpdate_product_productType_taxType | null;
}
export interface SimpleProductUpdate_productUpdate_product_pricing_priceRangeUndiscounted_start_gross {
@ -197,6 +204,12 @@ export interface SimpleProductUpdate_productUpdate_product_weight {
value: number;
}
export interface SimpleProductUpdate_productUpdate_product_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface SimpleProductUpdate_productUpdate_product {
__typename: "Product";
id: string;
@ -222,6 +235,7 @@ export interface SimpleProductUpdate_productUpdate_product {
images: (SimpleProductUpdate_productUpdate_product_images | null)[] | null;
variants: (SimpleProductUpdate_productUpdate_product_variants | null)[] | null;
weight: SimpleProductUpdate_productUpdate_product_weight | null;
taxType: SimpleProductUpdate_productUpdate_product_taxType | null;
availableForPurchase: any | null;
visibleInListings: boolean;
}
@ -820,21 +834,10 @@ export interface SimpleProductUpdate {
export interface SimpleProductUpdateVariables {
id: string;
attributes?: (AttributeValueInput | null)[] | null;
publicationDate?: any | null;
category?: string | null;
chargeTaxes: boolean;
collections?: (string | null)[] | null;
descriptionJson?: any | null;
isPublished: boolean;
name?: string | null;
basePrice?: any | null;
input: ProductInput;
productVariantId: string;
productVariantInput: ProductVariantInput;
seo?: SeoInput | null;
addStocks: StockInput[];
deleteStocks: string[];
updateStocks: StockInput[];
weight?: any | null;
visibleInListings?: boolean | null;
}

10
src/products/utils/data.ts
View file

@ -174,20 +174,22 @@ export interface ProductUpdatePageFormData extends MetadataFormData {
availableForPurchase: string;
basePrice: number;
category: string | null;
collections: string[];
changeTaxCode: boolean;
chargeTaxes: boolean;
collections: string[];
description: RawDraftContentState;
isAvailableForPurchase: boolean;
isAvailable: boolean;
isAvailableForPurchase: boolean;
isPublished: boolean;
name: string;
publicationDate: string;
seoDescription: string;
seoTitle: string;
sku: string;
taxCode: string;
trackInventory: boolean;
weight: string;
visibleInListings: boolean;
weight: string;
}
export function getProductUpdatePageFormData(
@ -198,6 +200,7 @@ export function getProductUpdatePageFormData(
availableForPurchase: product?.availableForPurchase,
basePrice: maybe(() => product.variants[0].price.amount, 0),
category: maybe(() => product.category.id, ""),
changeTaxCode: !!product?.taxType.taxCode,
chargeTaxes: maybe(() => product.chargeTaxes, false),
collections: maybe(
() => product.collections.map(collection => collection.id),
@ -222,6 +225,7 @@ export function getProductUpdatePageFormData(
: undefined,
""
),
taxCode: product?.taxType.taxCode,
trackInventory: !!product?.variants[0]?.trackInventory,
visibleInListings: !!product?.visibleInListings,
weight: product?.weight?.value.toString() || ""

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

@ -7,6 +7,7 @@ import { getProductAvailabilityVariables } from "@saleor/products/utils/handlers
import useCategorySearch from "@saleor/searches/useCategorySearch";
import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import useProductTypeSearch from "@saleor/searches/useProductTypeSearch";
import { useTaxTypeList } from "@saleor/taxes/queries";
import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
import {
useMetadataUpdate,
@ -60,6 +61,7 @@ export const ProductCreateView: React.FC = () => {
});
const [updateMetadata] = useMetadataUpdate({});
const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
const taxTypes = useTaxTypeList({});
const handleBack = () => navigate(productListUrl());
@ -91,32 +93,35 @@ export const ProductCreateView: React.FC = () => {
const handleCreate = async (formData: ProductCreatePageSubmitData) => {
const result = await productCreate({
variables: {
attributes: formData.attributes.map(attribute => ({
id: attribute.id,
values: attribute.value
})),
basePrice: decimal(formData.basePrice),
category: formData.category,
chargeTaxes: formData.chargeTaxes,
collections: formData.collections,
descriptionJson: JSON.stringify(formData.description),
isPublished: formData.isPublished,
name: formData.name,
productType: formData.productType,
publicationDate:
formData.publicationDate !== "" ? formData.publicationDate : null,
seo: {
description: formData.seoDescription,
title: formData.seoTitle
},
sku: formData.sku,
stocks: formData.stocks.map(stock => ({
quantity: parseInt(stock.value, 0),
warehouse: stock.id
})),
trackInventory: formData.trackInventory,
visibleInListings: formData.visibleInListings,
weight: weight(formData.weight)
input: {
attributes: formData.attributes.map(attribute => ({
id: attribute.id,
values: attribute.value
})),
basePrice: decimal(formData.basePrice),
category: formData.category,
chargeTaxes: formData.chargeTaxes,
collections: formData.collections,
descriptionJson: JSON.stringify(formData.description),
isPublished: formData.isPublished,
name: formData.name,
productType: formData.productType,
publicationDate:
formData.publicationDate !== "" ? formData.publicationDate : null,
seo: {
description: formData.seoDescription,
title: formData.seoTitle
},
sku: formData.sku,
stocks: formData.stocks.map(stock => ({
quantity: parseInt(stock.value, 0),
warehouse: stock.id
})),
taxCode: formData.changeTaxCode ? formData.taxCode : undefined,
trackInventory: formData.trackInventory,
visibleInListings: formData.visibleInListings,
weight: weight(formData.weight)
}
}
});
@ -193,6 +198,7 @@ export const ProductCreateView: React.FC = () => {
warehouses={
warehouses.data?.warehouses.edges.map(edge => edge.node) || []
}
taxTypes={taxTypes.data?.taxTypes || []}
weightUnit={shop?.defaultWeightUnit}
/>
</>

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

@ -298,6 +298,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
warehouses={
warehouses.data?.warehouses.edges.map(edge => edge.node) || []
}
taxTypes={data?.taxTypes}
variants={maybe(() => product.variants)}
onBack={handleBack}
onDelete={() => openModal("remove")}

46
src/products/views/ProductUpdate/handlers.ts
View file

@ -41,25 +41,28 @@ export function createUpdateHandler(
) {
return async (data: ProductUpdatePageSubmitData) => {
const productVariables: ProductUpdateVariables = {
attributes: data.attributes.map(attribute => ({
id: attribute.id,
values: attribute.value[0] === "" ? [] : attribute.value
})),
basePrice: decimal(data.basePrice),
category: data.category,
chargeTaxes: data.chargeTaxes,
collections: data.collections,
descriptionJson: JSON.stringify(data.description),
id: product.id,
isPublished: data.isPublished,
name: data.name,
publicationDate:
data.publicationDate !== "" ? data.publicationDate : null,
seo: {
description: data.seoDescription,
title: data.seoTitle
},
visibleInListings: data.visibleInListings
input: {
attributes: data.attributes.map(attribute => ({
id: attribute.id,
values: attribute.value[0] === "" ? [] : attribute.value
})),
basePrice: decimal(data.basePrice),
category: data.category,
chargeTaxes: data.chargeTaxes,
collections: data.collections,
descriptionJson: JSON.stringify(data.description),
isPublished: data.isPublished,
name: data.name,
publicationDate:
data.publicationDate !== "" ? data.publicationDate : null,
seo: {
description: data.seoDescription,
title: data.seoTitle
},
taxCode: data.changeTaxCode ? data.taxCode : null,
visibleInListings: data.visibleInListings
}
};
let errors: Array<
@ -74,13 +77,16 @@ export function createUpdateHandler(
...productVariables,
addStocks: data.addStocks.map(mapFormsetStockToStockInput),
deleteStocks: data.removeStocks,
input: {
...productVariables.input,
weight: weight(data.weight)
},
productVariantId: product.variants[0].id,
productVariantInput: {
sku: data.sku,
trackInventory: data.trackInventory
},
updateStocks: data.updateStocks.map(mapFormsetStockToStockInput),
weight: weight(data.weight)
updateStocks: data.updateStocks.map(mapFormsetStockToStockInput)
});
errors = [
...result.data.productUpdate.errors,

7
src/searches/types/SearchProductTypes.ts
View file

@ -25,12 +25,19 @@ export interface SearchProductTypes_search_edges_node_productAttributes {
values: (SearchProductTypes_search_edges_node_productAttributes_values | null)[] | null;
}
export interface SearchProductTypes_search_edges_node_taxType {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface SearchProductTypes_search_edges_node {
__typename: "ProductType";
id: string;
name: string;
hasVariants: boolean;
productAttributes: (SearchProductTypes_search_edges_node_productAttributes | null)[] | null;
taxType: SearchProductTypes_search_edges_node_taxType | null;
}
export interface SearchProductTypes_search_edges {

5
src/searches/useProductTypeSearch.ts
View file

@ -1,4 +1,5 @@
import { pageInfoFragment } from "@saleor/fragments/pageInfo";
import { taxTypeFragment } from "@saleor/fragments/taxes";
import makeTopLevelSearch from "@saleor/hooks/makeTopLevelSearch";
import gql from "graphql-tag";
@ -9,6 +10,7 @@ import {
export const searchProductTypes = gql`
${pageInfoFragment}
${taxTypeFragment}
query SearchProductTypes($after: String, $first: Int!, $query: String!) {
search: productTypes(
after: $after
@ -32,6 +34,9 @@ export const searchProductTypes = gql`
slug
}
}
taxType {
...TaxTypeFragment
}
}
}
pageInfo {

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

File diff suppressed because it is too large Load diff

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

@ -10,6 +10,7 @@ import ProductCreatePage, {
import { product as productFixture } from "../../../products/fixtures";
import { productTypes } from "../../../productTypes/fixtures";
import Decorator from "../../Decorator";
import { taxTypes } from "../taxes/fixtures";
const product = productFixture("");
@ -34,6 +35,7 @@ storiesOf("Views / Products / Create product", module)
onSubmit={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
taxTypes={taxTypes}
weightUnit="kg"
/>
))
@ -56,6 +58,7 @@ storiesOf("Views / Products / Create product", module)
onSubmit={() => undefined}
saveButtonBarState="default"
warehouses={undefined}
taxTypes={taxTypes}
weightUnit="kg"
/>
))
@ -84,6 +87,7 @@ storiesOf("Views / Products / Create product", module)
onSubmit={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
taxTypes={taxTypes}
weightUnit="kg"
/>
));

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

@ -12,6 +12,7 @@ import { storiesOf } from "@storybook/react";
import React from "react";
import Decorator from "../../Decorator";
import { taxTypes } from "../taxes/fixtures";
const product = productFixture(placeholderImage);
@ -41,6 +42,7 @@ const props: ProductUpdatePageProps = {
placeholderImage,
product,
saveButtonBarState: "default",
taxTypes,
variants: product.variants,
warehouses: warehouseList
};

83
src/storybook/stories/taxes/fixtures.ts
View file

@ -1,3 +1,5 @@
import { TaxTypeFragment } from "@saleor/fragments/types/TaxTypeFragment";
import { CountryList_shop_countries } from "../../../taxes/types/CountryList";
import { TaxRateType } from "../../../types/globalTypes";
@ -2714,3 +2716,84 @@ export const countries: CountryList = [
vat: null
}
].filter(country => country.vat);
/* eslint-disable sort-keys */
export const taxTypes: TaxTypeFragment[] = [
{
description: "accommodation",
taxCode: "accommodation",
__typename: "TaxType"
},
{
description: "admission to cultural events",
taxCode: "admission to cultural events",
__typename: "TaxType"
},
{
description: "admission to entertainment events",
taxCode: "admission to entertainment events",
__typename: "TaxType"
},
{
description: "admission to sporting events",
taxCode: "admission to sporting events",
__typename: "TaxType"
},
{ description: "advertising", taxCode: "advertising", __typename: "TaxType" },
{
description: "agricultural supplies",
taxCode: "agricultural supplies",
__typename: "TaxType"
},
{
description: "baby foodstuffs",
taxCode: "baby foodstuffs",
__typename: "TaxType"
},
{ description: "bikes", taxCode: "bikes", __typename: "TaxType" },
{ description: "books", taxCode: "books", __typename: "TaxType" },
{
description: "childrens clothing",
taxCode: "childrens clothing",
__typename: "TaxType"
},
{
description: "domestic fuel",
taxCode: "domestic fuel",
__typename: "TaxType"
},
{
description: "domestic services",
taxCode: "domestic services",
__typename: "TaxType"
},
{ description: "e-books", taxCode: "e-books", __typename: "TaxType" },
{ description: "foodstuffs", taxCode: "foodstuffs", __typename: "TaxType" },
{ description: "hotels", taxCode: "hotels", __typename: "TaxType" },
{ description: "medical", taxCode: "medical", __typename: "TaxType" },
{ description: "newspapers", taxCode: "newspapers", __typename: "TaxType" },
{
description: "passenger transport",
taxCode: "passenger transport",
__typename: "TaxType"
},
{
description: "pharmaceuticals",
taxCode: "pharmaceuticals",
__typename: "TaxType"
},
{
description: "property renovations",
taxCode: "property renovations",
__typename: "TaxType"
},
{ description: "restaurants", taxCode: "restaurants", __typename: "TaxType" },
{
description: "social housing",
taxCode: "social housing",
__typename: "TaxType"
},
{ description: "standard", taxCode: "standard", __typename: "TaxType" },
{ description: "water", taxCode: "water", __typename: "TaxType" },
{ description: "wine", taxCode: "wine", __typename: "TaxType" }
];

15
src/taxes/queries.ts
View file

@ -1,11 +1,14 @@
import {
countryWithTaxesFragment,
shopTaxesFragment
shopTaxesFragment,
taxTypeFragment
} from "@saleor/fragments/taxes";
import makeQuery from "@saleor/hooks/makeQuery";
import gql from "graphql-tag";
import { TypedQuery } from "../queries";
import { CountryList } from "./types/CountryList";
import { TaxTypeList } from "./types/TaxTypeList";
const countryList = gql`
${countryWithTaxesFragment}
@ -20,3 +23,13 @@ const countryList = gql`
}
`;
export const TypedCountryListQuery = TypedQuery<CountryList, {}>(countryList);
const taxTypeList = gql`
${taxTypeFragment}
query TaxTypeList {
taxTypes {
...TaxTypeFragment
}
}
`;
export const useTaxTypeList = makeQuery<TaxTypeList, {}>(taxTypeList);

17
src/taxes/types/TaxTypeList.ts Normal file
View file

@ -0,0 +1,17 @@
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.
// ====================================================
// GraphQL query operation: TaxTypeList
// ====================================================
export interface TaxTypeList_taxTypes {
__typename: "TaxType";
description: string | null;
taxCode: string | null;
}
export interface TaxTypeList {
taxTypes: (TaxTypeList_taxTypes | null)[] | null;
}

42
src/types/globalTypes.ts
View file

@ -1341,6 +1341,28 @@ export interface PriceRangeInput {
lte?: number | null;
}
export interface ProductCreateInput {
attributes?: (AttributeValueInput | null)[] | null;
publicationDate?: any | null;
category?: string | null;
chargeTaxes?: boolean | null;
collections?: (string | null)[] | null;
description?: string | null;
descriptionJson?: any | null;
isPublished?: boolean | null;
name?: string | null;
slug?: string | null;
taxCode?: string | null;
seo?: SeoInput | null;
weight?: any | null;
sku?: string | null;
trackInventory?: boolean | null;
basePrice?: any | null;
visibleInListings?: boolean | null;
productType: string;
stocks?: StockInput[] | null;
}
export interface ProductFilterInput {
isPublished?: boolean | null;
collections?: (string | null)[] | null;
@ -1356,6 +1378,26 @@ export interface ProductFilterInput {
productTypes?: (string | null)[] | null;
}
export interface ProductInput {
attributes?: (AttributeValueInput | null)[] | null;
publicationDate?: any | null;
category?: string | null;
chargeTaxes?: boolean | null;
collections?: (string | null)[] | null;
description?: string | null;
descriptionJson?: any | null;
isPublished?: boolean | null;
name?: string | null;
slug?: string | null;
taxCode?: string | null;
seo?: SeoInput | null;
weight?: any | null;
sku?: string | null;
trackInventory?: boolean | null;
basePrice?: any | null;
visibleInListings?: boolean | null;
}
export interface ProductOrder {
direction: OrderDirection;
attributeId?: string | null;

5
src/utils/errors/product.ts
View file

@ -7,6 +7,9 @@ import { defineMessages, IntlShape } from "react-intl";
import commonErrorMessages from "./common";
const messages = defineMessages({
alreadyExists: {
defaultMessage: "A product with this SKU already exists"
},
attributeAlreadyAssigned: {
defaultMessage:
"This attribute has already been assigned to this product type"
@ -45,6 +48,8 @@ function getProductErrorMessage(
switch (err.code) {
case ProductErrorCode.ATTRIBUTE_ALREADY_ASSIGNED:
return intl.formatMessage(messages.attributeAlreadyAssigned);
case ProductErrorCode.ALREADY_EXISTS:
return intl.formatMessage(messages.alreadyExists);
case ProductErrorCode.ATTRIBUTE_CANNOT_BE_ASSIGNED:
return intl.formatMessage(messages.attributeCannotBeAssigned);
case ProductErrorCode.ATTRIBUTE_VARIANTS_DISABLED: