From 2b92211b9949dccf4a4ed22b91962fcaa0f240af Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 23 Sep 2020 10:29:13 +0200 Subject: [PATCH 1/6] Add tax section to product view --- .../SingleAutocompleteSelectField.tsx | 8 +- src/fragments/products.ts | 8 ++ src/fragments/taxes.ts | 6 + src/fragments/types/Product.ts | 14 +++ src/fragments/types/TaxTypeFragment.ts | 13 +++ .../ProductPricing/ProductPricing.tsx | 14 +-- .../components/ProductTaxes/ProductTaxes.tsx | 109 ++++++++++++++++++ src/products/components/ProductTaxes/index.ts | 2 + .../ProductUpdatePage/ProductUpdatePage.tsx | 27 +++++ src/products/fixtures.ts | 10 +- src/products/mutations.ts | 103 +---------------- src/products/queries.ts | 5 + src/products/types/ProductCreate.ts | 33 +++--- src/products/types/ProductDetails.ts | 21 ++++ src/products/types/ProductImageCreate.ts | 14 +++ src/products/types/ProductImageUpdate.ts | 14 +++ src/products/types/ProductUpdate.ts | 28 +++-- src/products/types/ProductVariantReorder.ts | 14 +++ src/products/types/SimpleProductUpdate.ts | 29 ++--- src/products/utils/data.ts | 11 +- src/products/views/ProductCreate.tsx | 54 ++++----- .../views/ProductUpdate/ProductUpdate.tsx | 1 + src/products/views/ProductUpdate/handlers.ts | 48 ++++---- src/types/globalTypes.ts | 42 +++++++ 24 files changed, 424 insertions(+), 204 deletions(-) create mode 100644 src/fragments/types/TaxTypeFragment.ts create mode 100644 src/products/components/ProductTaxes/ProductTaxes.tsx create mode 100644 src/products/components/ProductTaxes/index.ts diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx index bca5ac905..a7913a898 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx @@ -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 { add?: SingleAutocompleteActionType; + className?: string; error?: boolean; name: string; displayValue: string; @@ -51,6 +53,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC +
= props => { defaultMessage: "Pricing", description: "product pricing" })} - > - - + />
({ + content: { + paddingTop: theme.spacing(2) + }, + hr: { + margin: theme.spacing(2, 0) + }, + select: { + margin: theme.spacing(2, 0) + } + }), + { + name: "ProductTaxes" + } +); + +const ProductTaxes: React.FC = ({ + data, + disabled, + selectedTaxTypeDisplayName, + taxTypes, + onChange, + onTaxTypeChange +}) => { + const intl = useIntl(); + const classes = useStyles({}); + + return ( + + + + +
+ + {data.changeTaxCode && ( + ({ + label: taxType.description, + value: taxType.taxCode + })) || [] + } + InputProps={{ + autoComplete: "off" + }} + /> + )} + + + ); +}; + +ProductTaxes.displayName = "ProductTaxes"; +export default ProductTaxes; diff --git a/src/products/components/ProductTaxes/index.ts b/src/products/components/ProductTaxes/index.ts new file mode 100644 index 000000000..e789213a0 --- /dev/null +++ b/src/products/components/ProductTaxes/index.ts @@ -0,0 +1,2 @@ +export * from "./ProductTaxes"; +export { default } from "./ProductTaxes"; diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx index ad8f27270..e037bc241 100644 --- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx +++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx @@ -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; @@ -110,6 +113,7 @@ export const ProductUpdatePage: React.FC = ({ saveButtonBarState, variants, warehouses, + taxTypes, onBack, onDelete, onImageDelete, @@ -159,6 +163,10 @@ export const ProductUpdatePage: React.FC = ({ getChoices(maybe(() => product.collections, [])) ); + const [selectedTaxType, setSelectedTaxType] = useStateFromProps( + product?.taxType.description + ); + const { isMetadataModified, isPrivateMetadataModified, @@ -175,6 +183,11 @@ export const ProductUpdatePage: React.FC = ({ 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; @@ -244,6 +257,11 @@ export const ProductUpdatePage: React.FC = ({ triggerChange ); const changeMetadata = makeMetadataChangeHandler(change); + const handleTaxTypeSelect = createSingleAutocompleteSelectHandler( + change, + setSelectedTaxType, + taxTypeChoices + ); return ( <> @@ -415,6 +433,15 @@ export const ProductUpdatePage: React.FC = ({ }} onChange={change} /> + +
( const productDetailsQuery = gql` ${productFragmentDetails} + ${taxTypeFragment} query ProductDetails($id: ID!) { product(id: $id) { ...Product } + taxTypes { + ...TaxTypeFragment + } } `; export const useProductDetails = makeQuery< diff --git a/src/products/types/ProductCreate.ts b/src/products/types/ProductCreate.ts index 68c154d91..840f45675 100644 --- a/src/products/types/ProductCreate.ts +++ b/src/products/types/ProductCreate.ts @@ -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 { @@ -192,6 +199,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; @@ -216,6 +229,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; } @@ -231,20 +245,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; } diff --git a/src/products/types/ProductDetails.ts b/src/products/types/ProductDetails.ts index 06e579bae..c4669780c 100644 --- a/src/products/types/ProductDetails.ts +++ b/src/products/types/ProductDetails.ts @@ -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 { @@ -186,6 +193,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; @@ -210,12 +223,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 { diff --git a/src/products/types/ProductImageCreate.ts b/src/products/types/ProductImageCreate.ts index 9c472c556..e9878f34d 100644 --- a/src/products/types/ProductImageCreate.ts +++ b/src/products/types/ProductImageCreate.ts @@ -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 { @@ -192,6 +199,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; @@ -216,6 +229,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; } diff --git a/src/products/types/ProductImageUpdate.ts b/src/products/types/ProductImageUpdate.ts index e85899725..c8980b156 100644 --- a/src/products/types/ProductImageUpdate.ts +++ b/src/products/types/ProductImageUpdate.ts @@ -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 { @@ -192,6 +199,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; @@ -216,6 +229,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; } diff --git a/src/products/types/ProductUpdate.ts b/src/products/types/ProductUpdate.ts index f03604480..7330a41f0 100644 --- a/src/products/types/ProductUpdate.ts +++ b/src/products/types/ProductUpdate.ts @@ -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 { @@ -192,6 +199,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; @@ -216,6 +229,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; } @@ -232,15 +246,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; } diff --git a/src/products/types/ProductVariantReorder.ts b/src/products/types/ProductVariantReorder.ts index 8c5f1741f..4996e3c00 100644 --- a/src/products/types/ProductVariantReorder.ts +++ b/src/products/types/ProductVariantReorder.ts @@ -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 { @@ -192,6 +199,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; @@ -216,6 +229,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; } diff --git a/src/products/types/SimpleProductUpdate.ts b/src/products/types/SimpleProductUpdate.ts index e023f09b1..c207771aa 100644 --- a/src/products/types/SimpleProductUpdate.ts +++ b/src/products/types/SimpleProductUpdate.ts @@ -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 { @@ -192,6 +199,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; @@ -216,6 +229,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; } @@ -814,21 +828,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; } diff --git a/src/products/utils/data.ts b/src/products/utils/data.ts index 28eab8a18..e9606b0de 100644 --- a/src/products/utils/data.ts +++ b/src/products/utils/data.ts @@ -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,8 @@ export function getProductUpdatePageFormData( availableForPurchase: product?.availableForPurchase, basePrice: maybe(() => product.variants[0].price.amount, 0), category: maybe(() => product.category.id, ""), + changeTaxCode: + product?.productType.taxType.taxCode !== product?.taxType.taxCode, chargeTaxes: maybe(() => product.chargeTaxes, false), collections: maybe( () => product.collections.map(collection => collection.id), @@ -222,6 +226,7 @@ export function getProductUpdatePageFormData( : undefined, "" ), + taxCode: product?.taxType.taxCode, trackInventory: !!product?.variants[0]?.trackInventory, visibleInListings: !!product?.visibleInListings, weight: product?.weight?.value.toString() || "" diff --git a/src/products/views/ProductCreate.tsx b/src/products/views/ProductCreate.tsx index f59685bff..4dfdccf41 100644 --- a/src/products/views/ProductCreate.tsx +++ b/src/products/views/ProductCreate.tsx @@ -91,32 +91,34 @@ 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 + })), + trackInventory: formData.trackInventory, + visibleInListings: formData.visibleInListings, + weight: weight(formData.weight) + } } }); diff --git a/src/products/views/ProductUpdate/ProductUpdate.tsx b/src/products/views/ProductUpdate/ProductUpdate.tsx index 8aeef201c..dd7bad66a 100644 --- a/src/products/views/ProductUpdate/ProductUpdate.tsx +++ b/src/products/views/ProductUpdate/ProductUpdate.tsx @@ -292,6 +292,7 @@ export const ProductUpdate: React.FC = ({ id, params }) => { warehouses={ warehouses.data?.warehouses.edges.map(edge => edge.node) || [] } + taxTypes={data?.taxTypes} variants={maybe(() => product.variants)} onBack={handleBack} onDelete={() => openModal("remove")} diff --git a/src/products/views/ProductUpdate/handlers.ts b/src/products/views/ProductUpdate/handlers.ts index 6e3de1180..3ba2b62be 100644 --- a/src/products/views/ProductUpdate/handlers.ts +++ b/src/products/views/ProductUpdate/handlers.ts @@ -41,25 +41,30 @@ 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 + : product.productType.taxType.taxCode, + visibleInListings: data.visibleInListings + } }; let errors: Array< @@ -74,13 +79,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, diff --git a/src/types/globalTypes.ts b/src/types/globalTypes.ts index 5d626b4df..f79be52c5 100644 --- a/src/types/globalTypes.ts +++ b/src/types/globalTypes.ts @@ -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; From baff4413a531686e4dbae131bfd225f5dd4413ed Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Thu, 24 Sep 2020 12:54:43 +0200 Subject: [PATCH 2/6] Improve rendering of large lists --- .../SingleAutocompleteSelectFieldContent.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx index 9a6794d65..319458a87 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx @@ -124,6 +124,8 @@ function getChoiceIndex( return choiceIndex; } +const sliceSize = 20; + const SingleAutocompleteSelectFieldContent: React.FC = props => { const { add, @@ -147,6 +149,7 @@ const SingleAutocompleteSelectFieldContent: React.FC(); 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 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 0 && (!!add || displayCustomValue) && (
)} - {choices.map((suggestion, index) => { + {choices.slice(0, slice).map((suggestion, index) => { const choiceIndex = getChoiceIndex( index, emptyOption, From a028c69810247fede51d752e20e94367dc90e159 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Thu, 24 Sep 2020 12:55:02 +0200 Subject: [PATCH 3/6] Add support for changing tax type for products --- .../ProductCreatePage/ProductCreatePage.tsx | 32 +++++++++++++++++-- .../ProductStocks/ProductStocks.tsx | 15 ++++++--- .../components/ProductTaxes/ProductTaxes.tsx | 2 +- src/products/utils/data.ts | 3 +- src/products/views/ProductCreate.tsx | 4 +++ src/products/views/ProductUpdate/handlers.ts | 4 +-- src/searches/types/SearchProductTypes.ts | 7 ++++ src/searches/useProductTypeSearch.ts | 5 +++ src/taxes/queries.ts | 15 ++++++++- src/taxes/types/TaxTypeList.ts | 17 ++++++++++ src/utils/errors/product.ts | 5 +++ 11 files changed, 95 insertions(+), 14 deletions(-) create mode 100644 src/taxes/types/TaxTypeList.ts diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx index d96f30343..7435200c0 100644 --- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx +++ b/src/products/components/ProductCreatePage/ProductCreatePage.tsx @@ -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 = ({ productTypes: productTypeChoiceList, saveButtonBarState, warehouses, + taxTypes, onBack, fetchProductTypes, weightUnit, @@ -148,6 +154,7 @@ export const ProductCreatePage: React.FC = ({ availableForPurchase: "", basePrice: 0, category: "", + changeTaxCode: false, chargeTaxes: false, collections: [], description: {} as any, @@ -163,6 +170,7 @@ export const ProductCreatePage: React.FC = ({ seoTitle: "", sku: null, stockQuantity: null, + taxCode: null, trackInventory: false, visibleInListings: false, weight: "" @@ -180,10 +188,16 @@ export const ProductCreatePage: React.FC = ({ >([]); const [productType, setProductType] = React.useState(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 = ({ setProductType, productTypeChoiceList ); + const handleTaxTypeSelect = createSingleAutocompleteSelectHandler( + change, + setSelectedTaxType, + taxTypeChoices + ); const changeMetadata = makeMetadataChangeHandler(change); @@ -367,6 +386,15 @@ export const ProductCreatePage: React.FC = ({ }} onChange={change} /> + +
= ({ const warehousesToAssign = warehouses.filter( warehouse => !stocks.some(stock => stock.id === warehouse.id) ); + const formErrors = getFormErrors(["sku"], errors); return ( @@ -135,9 +140,9 @@ const ProductStocks: React.FC = ({
= ({ checked={data.changeTaxCode} disabled={disabled} label={intl.formatMessage({ - defaultMessage: "Change default product’s tax rate", + defaultMessage: "Override the product type's tax rate", description: "checkbox" })} name="changeTaxCode" diff --git a/src/products/utils/data.ts b/src/products/utils/data.ts index e9606b0de..c6154419c 100644 --- a/src/products/utils/data.ts +++ b/src/products/utils/data.ts @@ -200,8 +200,7 @@ export function getProductUpdatePageFormData( availableForPurchase: product?.availableForPurchase, basePrice: maybe(() => product.variants[0].price.amount, 0), category: maybe(() => product.category.id, ""), - changeTaxCode: - product?.productType.taxType.taxCode !== product?.taxType.taxCode, + changeTaxCode: !!product?.taxType.taxCode, chargeTaxes: maybe(() => product.chargeTaxes, false), collections: maybe( () => product.collections.map(collection => collection.id), diff --git a/src/products/views/ProductCreate.tsx b/src/products/views/ProductCreate.tsx index 4dfdccf41..1d54f64b9 100644 --- a/src/products/views/ProductCreate.tsx +++ b/src/products/views/ProductCreate.tsx @@ -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 { useTaxTypeListt } 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 = useTaxTypeListt({}); const handleBack = () => navigate(productListUrl()); @@ -115,6 +117,7 @@ export const ProductCreateView: React.FC = () => { quantity: parseInt(stock.value, 0), warehouse: stock.id })), + taxCode: formData.changeTaxCode ? formData.taxCode : undefined, trackInventory: formData.trackInventory, visibleInListings: formData.visibleInListings, weight: weight(formData.weight) @@ -195,6 +198,7 @@ export const ProductCreateView: React.FC = () => { warehouses={ warehouses.data?.warehouses.edges.map(edge => edge.node) || [] } + taxTypes={taxTypes.data?.taxTypes || []} weightUnit={shop?.defaultWeightUnit} /> diff --git a/src/products/views/ProductUpdate/handlers.ts b/src/products/views/ProductUpdate/handlers.ts index 3ba2b62be..feedc84a2 100644 --- a/src/products/views/ProductUpdate/handlers.ts +++ b/src/products/views/ProductUpdate/handlers.ts @@ -60,9 +60,7 @@ export function createUpdateHandler( description: data.seoDescription, title: data.seoTitle }, - taxCode: data.changeTaxCode - ? data.taxCode - : product.productType.taxType.taxCode, + taxCode: data.changeTaxCode ? data.taxCode : null, visibleInListings: data.visibleInListings } }; diff --git a/src/searches/types/SearchProductTypes.ts b/src/searches/types/SearchProductTypes.ts index a35124ca1..2d79b4665 100644 --- a/src/searches/types/SearchProductTypes.ts +++ b/src/searches/types/SearchProductTypes.ts @@ -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 { diff --git a/src/searches/useProductTypeSearch.ts b/src/searches/useProductTypeSearch.ts index e5cad1f89..6414b8d7d 100644 --- a/src/searches/useProductTypeSearch.ts +++ b/src/searches/useProductTypeSearch.ts @@ -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 { diff --git a/src/taxes/queries.ts b/src/taxes/queries.ts index 342756eb4..7b4ea6111 100644 --- a/src/taxes/queries.ts +++ b/src/taxes/queries.ts @@ -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); + +const taxTypeList = gql` + ${taxTypeFragment} + query TaxTypeList { + taxTypes { + ...TaxTypeFragment + } + } +`; +export const useTaxTypeListt = makeQuery(taxTypeList); diff --git a/src/taxes/types/TaxTypeList.ts b/src/taxes/types/TaxTypeList.ts new file mode 100644 index 000000000..1f241905d --- /dev/null +++ b/src/taxes/types/TaxTypeList.ts @@ -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; +} diff --git a/src/utils/errors/product.ts b/src/utils/errors/product.ts index 976010a4b..61806ec48 100644 --- a/src/utils/errors/product.ts +++ b/src/utils/errors/product.ts @@ -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: From 9a9c6a01a1636884cbd883325a6d8c5844613743 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Thu, 24 Sep 2020 13:36:29 +0200 Subject: [PATCH 4/6] Fix stories --- .../ProductStocks/ProductStocks.tsx | 6 +- src/products/fixtures.ts | 2 + .../__snapshots__/Stories.test.ts.snap | 1891 +++++++++++++++-- .../stories/products/ProductCreatePage.tsx | 4 + .../stories/products/ProductUpdatePage.tsx | 2 + src/storybook/stories/taxes/fixtures.ts | 83 + 6 files changed, 1838 insertions(+), 150 deletions(-) diff --git a/src/products/components/ProductStocks/ProductStocks.tsx b/src/products/components/ProductStocks/ProductStocks.tsx index 5a9e0a22b..1f36f6601 100644 --- a/src/products/components/ProductStocks/ProductStocks.tsx +++ b/src/products/components/ProductStocks/ProductStocks.tsx @@ -27,11 +27,7 @@ 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 { - getFieldError, - getFormErrors, - getProductErrorMessage -} from "@saleor/utils/errors"; +import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/products/fixtures.ts b/src/products/fixtures.ts index ba6fad316..f8b198146 100644 --- a/src/products/fixtures.ts +++ b/src/products/fixtures.ts @@ -207,6 +207,7 @@ export const product: ( name: "Versatile", taxType: { __typename: "TaxType", + description: "standard", taxCode: "standard" }, variantAttributes: [ @@ -257,6 +258,7 @@ export const product: ( sku: "59661-34207", taxType: { __typename: "TaxType", + description: "standard", taxCode: "standard" }, thumbnail: { __typename: "Image" as "Image", url: placeholderImage }, diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 33ab804f4..3fb03fc7c 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -138015,6 +138015,122 @@ Ctrl + K" />
+
+
+
+ + Taxes + +
+
+
+
+
+ +
+ +
+
@@ -139172,6 +139288,118 @@ Ctrl + K" /> +
+
+
+ + Taxes + +
+
+
+
+
+ +
+ +
+
@@ -140344,6 +140572,118 @@ Ctrl + K" /> +
+
+
+ + Taxes + +
+
+
+
+
+ +
+ +
+
@@ -143421,6 +143761,11 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] = +

+ A product with this SKU already exists +

+
+
+
+ + Taxes + +
+
+
+
+
+ +
+ +
+
+ + +
+
+
+
@@ -148053,6 +148581,189 @@ Ctrl + K" /> +
+
+
+ + Taxes + +
+
+
+
+
+ +
+ +
+
+ + +
+
+
+
@@ -149096,54 +149807,7 @@ Ctrl + K"
- -
+ />
@@ -150424,6 +151088,189 @@ Ctrl + K" /> +
+
+
+ + Taxes + +
+
+
+
+
+ +
+ +
+
+ + +
+
+
+
@@ -151467,54 +152314,7 @@ Ctrl + K"
- -
+ />
@@ -152929,6 +153729,189 @@ Ctrl + K" /> +
+
+
+ + Taxes + +
+
+
+
+
+ +
+ +
+
+ + +
+
+
+
@@ -155219,6 +156202,189 @@ Ctrl + K" /> +
+
+
+ + Taxes + +
+
+
+
+
+ +
+ +
+
+ + +
+
+
+
@@ -156525,6 +157691,122 @@ Ctrl + K" /> +
+
+
+ + Taxes + +
+
+
+
+
+ +
+ +
+
@@ -158771,6 +160053,189 @@ Ctrl + K" /> +
+
+
+ + Taxes + +
+
+
+
+
+ +
+ +
+
+ + +
+
+
+
@@ -159814,54 +161279,7 @@ Ctrl + K"
- -
+ />
@@ -161276,6 +162694,189 @@ Ctrl + K" /> +
+
+
+ + Taxes + +
+
+
+
+
+ +
+ +
+
+ + +
+
+
+
@@ -168680,7 +170281,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors

- Generic form error + A product with this SKU already exists

diff --git a/src/storybook/stories/products/ProductCreatePage.tsx b/src/storybook/stories/products/ProductCreatePage.tsx index 789bcc42f..babd8504a 100644 --- a/src/storybook/stories/products/ProductCreatePage.tsx +++ b/src/storybook/stories/products/ProductCreatePage.tsx @@ -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" /> )); diff --git a/src/storybook/stories/products/ProductUpdatePage.tsx b/src/storybook/stories/products/ProductUpdatePage.tsx index 7682f8369..e137d92ac 100644 --- a/src/storybook/stories/products/ProductUpdatePage.tsx +++ b/src/storybook/stories/products/ProductUpdatePage.tsx @@ -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); @@ -40,6 +41,7 @@ const props: ProductUpdatePageProps = { placeholderImage, product, saveButtonBarState: "default", + taxTypes, variants: product.variants, warehouses: warehouseList }; diff --git a/src/storybook/stories/taxes/fixtures.ts b/src/storybook/stories/taxes/fixtures.ts index cb344a011..ca5ac8882 100644 --- a/src/storybook/stories/taxes/fixtures.ts +++ b/src/storybook/stories/taxes/fixtures.ts @@ -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" } +]; From 5b6a420199a132e2f24d097188bac18a70e11ff1 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Thu, 24 Sep 2020 13:44:19 +0200 Subject: [PATCH 5/6] Update changelog, stories and messages --- CHANGELOG.md | 1 + locale/defaultMessages.json | 15 ++++++++-- .../components/ProductTaxes/ProductTaxes.tsx | 3 ++ .../__snapshots__/Stories.test.ts.snap | 29 +++++++++++++++++++ 4 files changed, 45 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2baa06eda..4aabe2613 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -45,6 +45,7 @@ All notable, unreleased changes to this project will be documented in this file. - Fix avatar change button - #719 by @orzechdev - 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 diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 95db1b070..d1bf04bfa 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -4322,9 +4322,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" @@ -4359,6 +4356,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}" diff --git a/src/products/components/ProductTaxes/ProductTaxes.tsx b/src/products/components/ProductTaxes/ProductTaxes.tsx index ec6de4841..a95afe9d1 100644 --- a/src/products/components/ProductTaxes/ProductTaxes.tsx +++ b/src/products/components/ProductTaxes/ProductTaxes.tsx @@ -59,6 +59,7 @@ const ProductTaxes: React.FC = ({ = ({ = ({ className={classes.select} disabled={disabled} displayValue={selectedTaxTypeDisplayName} + data-test="select-tax-type" label={intl.formatMessage({ defaultMessage: "Tax Rate", description: "select tax ratte" diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 3fb03fc7c..3bbb85fc9 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -138044,6 +138044,7 @@ Ctrl + K" >