Add tax section to product view

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<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,

src/fragments/products.ts

@@ -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
@@ -173,10 +175,16 @@ export const productFragmentDetails = gql`
       id
       name
       hasVariants
+      taxType {
+        ...TaxTypeFragment
+      }
     }
     weight {
       ...WeightFragment
     }
+    taxType {
+      ...TaxTypeFragment
+    }
     availableForPurchase
     visibleInListings
   }

src/fragments/taxes.ts

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

src/fragments/types/Product.ts

@@ -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 {
@@ -186,6 +193,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;
@@ -210,6 +223,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;
 }

src/fragments/types/TaxTypeFragment.ts

@@ -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;
+}

src/products/components/ProductPricing/ProductPricing.tsx

@@ -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

src/products/components/ProductTaxes/ProductTaxes.tsx

@@ -0,0 +1,109 @@
+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}
+          label={intl.formatMessage({
+            defaultMessage: "Change default product’s tax rate",
+            description: "checkbox"
+          })}
+          name="changeTaxCode"
+          onChange={onChange}
+        />
+        <Hr className={classes.hr} />
+        <ControlledCheckbox
+          checked={data.chargeTaxes}
+          disabled={disabled}
+          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}
+            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;

src/products/components/ProductTaxes/index.ts

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

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<ProductUpdatePageProps> = ({
   saveButtonBarState,
   variants,
   warehouses,
+  taxTypes,
   onBack,
   onDelete,
   onImageDelete,
@@ -159,6 +163,10 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
     getChoices(maybe(() => product.collections, []))
   );
 
+  const [selectedTaxType, setSelectedTaxType] = useStateFromProps(
+    product?.taxType.description
+  );
+
   const {
     isMetadataModified,
     isPrivateMetadataModified,
@@ -175,6 +183,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;
@@ -244,6 +257,11 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
           triggerChange
         );
         const changeMetadata = makeMetadataChangeHandler(change);
+        const handleTaxTypeSelect = createSingleAutocompleteSelectHandler(
+          change,
+          setSelectedTaxType,
+          taxTypeChoices
+        );
 
         return (
           <>
@@ -415,6 +433,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

src/products/fixtures.ts

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

src/products/mutations.ts

@@ -137,36 +137,8 @@ export const useProductImagesReorder = makeMutation<
 export const productUpdateMutation = gql`
   ${productErrorFragment}
   ${productFragmentDetails}
-  mutation ProductUpdate(
+  mutation ProductUpdate($id: ID!, $input: ProductInput!) {
-    $id: ID!
+    productUpdate(id: $id, input: $input) {
-    $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
-      }
-    ) {
       errors: productErrors {
         ...ProductErrorFragment
       }
@@ -189,41 +161,14 @@ export const simpleProductUpdateMutation = gql`
   ${fragmentVariant}
   mutation SimpleProductUpdate(
     $id: ID!
-    $attributes: [AttributeValueInput]
+    $input: ProductInput!
-    $publicationDate: Date
-    $category: ID
-    $chargeTaxes: Boolean!
-    $collections: [ID]
-    $descriptionJson: JSONString
-    $isPublished: Boolean!
-    $name: String
-    $basePrice: PositiveDecimal
     $productVariantId: ID!
     $productVariantInput: ProductVariantInput!
-    $seo: SeoInput
     $addStocks: [StockInput!]!
     $deleteStocks: [ID!]!
     $updateStocks: [StockInput!]!
-    $weight: WeightScalar
-    $visibleInListings: Boolean
   ) {
-    productUpdate(
+    productUpdate(id: $id, input: $input) {
-      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
-      }
-    ) {
       errors: productErrors {
         ...ProductErrorFragment
       }
@@ -282,44 +227,8 @@ export const useSimpleProductUpdateMutation = makeMutation<
 export const productCreateMutation = gql`
   ${productErrorFragment}
   ${productFragmentDetails}
-  mutation ProductCreate(
+  mutation ProductCreate($input: ProductCreateInput!) {
-    $attributes: [AttributeValueInput]
+    productCreate(input: $input) {
-    $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
-      }
-    ) {
       errors: productErrors {
         ...ProductErrorFragment
       }

src/products/queries.ts

@@ -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<

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;
+  input: ProductCreateInput;
-  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;
 }

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 {

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;
 }

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;
 }

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;
+  input: ProductInput;
-  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;
 }

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;
 }

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;
+  input: ProductInput;
-  publicationDate?: any | null;
-  category?: string | null;
-  chargeTaxes: boolean;
-  collections?: (string | null)[] | null;
-  descriptionJson?: any | null;
-  isPublished: boolean;
-  name?: string | null;
-  basePrice?: any | null;
   productVariantId: string;
   productVariantInput: ProductVariantInput;
-  seo?: SeoInput | null;
   addStocks: StockInput[];
   deleteStocks: string[];
   updateStocks: StockInput[];
-  weight?: any | null;
-  visibleInListings?: boolean | null;
 }

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() || ""

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 => ({
+        input: {
-          id: attribute.id,
+          attributes: formData.attributes.map(attribute => ({
-          values: attribute.value
+            id: attribute.id,
-        })),
+            values: attribute.value
-        basePrice: decimal(formData.basePrice),
+          })),
-        category: formData.category,
+          basePrice: decimal(formData.basePrice),
-        chargeTaxes: formData.chargeTaxes,
+          category: formData.category,
-        collections: formData.collections,
+          chargeTaxes: formData.chargeTaxes,
-        descriptionJson: JSON.stringify(formData.description),
+          collections: formData.collections,
-        isPublished: formData.isPublished,
+          descriptionJson: JSON.stringify(formData.description),
-        name: formData.name,
+          isPublished: formData.isPublished,
-        productType: formData.productType,
+          name: formData.name,
-        publicationDate:
+          productType: formData.productType,
-          formData.publicationDate !== "" ? formData.publicationDate : null,
+          publicationDate:
-        seo: {
+            formData.publicationDate !== "" ? formData.publicationDate : null,
-          description: formData.seoDescription,
+          seo: {
-          title: formData.seoTitle
+            description: formData.seoDescription,
-        },
+            title: formData.seoTitle
-        sku: formData.sku,
+          },
-        stocks: formData.stocks.map(stock => ({
+          sku: formData.sku,
-          quantity: parseInt(stock.value, 0),
+          stocks: formData.stocks.map(stock => ({
-          warehouse: stock.id
+            quantity: parseInt(stock.value, 0),
-        })),
+            warehouse: stock.id
-        trackInventory: formData.trackInventory,
+          })),
-        visibleInListings: formData.visibleInListings,
+          trackInventory: formData.trackInventory,
-        weight: weight(formData.weight)
+          visibleInListings: formData.visibleInListings,
+          weight: weight(formData.weight)
+        }
       }
     });
 

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -292,6 +292,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")}

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,
+      input: {
-      name: data.name,
+        attributes: data.attributes.map(attribute => ({
-      publicationDate:
+          id: attribute.id,
-        data.publicationDate !== "" ? data.publicationDate : null,
+          values: attribute.value[0] === "" ? [] : attribute.value
-      seo: {
+        })),
-        description: data.seoDescription,
+        basePrice: decimal(data.basePrice),
-        title: data.seoTitle
+        category: data.category,
-      },
+        chargeTaxes: data.chargeTaxes,
-      visibleInListings: data.visibleInListings
+        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),
+        updateStocks: data.updateStocks.map(mapFormsetStockToStockInput)
-        weight: weight(data.weight)
       });
       errors = [
         ...result.data.productUpdate.errors,

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;