Add weight to simple products

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -43,6 +43,7 @@ import ProductDetailsForm from "../ProductDetailsForm";
 import ProductOrganization from "../ProductOrganization";
 import ProductPricing from "../ProductPricing";
 import ProductStocks, { ProductStockInput } from "../ProductStocks";
+import ProductShipping from "../ProductShipping/ProductShipping";
 
 interface FormData {
   basePrice: number;
@@ -59,6 +60,7 @@ interface FormData {
   sku: string;
   stockQuantity: number;
   trackInventory: boolean;
+  weight: string;
 }
 export interface ProductCreatePageSubmitData extends FormData {
   attributes: ProductAttributeInput[];
@@ -82,6 +84,7 @@ interface ProductCreatePageProps {
   }>;
   header: string;
   saveButtonBarState: ConfirmButtonTransitionState;
+  weightUnit: string;
   warehouses: SearchWarehouses_search_edges_node[];
   fetchCategories: (data: string) => void;
   fetchCollections: (data: string) => void;
@@ -107,6 +110,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   warehouses,
   onBack,
   fetchProductTypes,
+  weightUnit,
   onSubmit
 }: ProductCreatePageProps) => {
   const intl = useIntl();
@@ -143,7 +147,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
     seoTitle: "",
     sku: null,
     stockQuantity: null,
-    trackInventory: false
+    trackInventory: false,
+    weight: ""
   };
 
   // Display values
@@ -242,6 +247,14 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                 <CardSpacer />
                 {!!productType && !productType.hasVariants && (
                   <>
+                    <ProductShipping
+                      data={data}
+                      disabled={disabled}
+                      errors={errors}
+                      weightUnit={weightUnit}
+                      onChange={change}
+                    />
+                    <CardSpacer />
                     <ProductStocks
                       data={data}
                       disabled={disabled}

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -50,8 +50,10 @@ import ProductOrganization from "../ProductOrganization";
 import ProductPricing from "../ProductPricing";
 import ProductVariants from "../ProductVariants";
 import ProductStocks, { ProductStockInput } from "../ProductStocks";
+import ProductShipping from "../ProductShipping/ProductShipping";
 
 export interface ProductUpdatePageProps extends ListActions {
+  defaultWeightUnit: string;
   errors: ProductErrorFragment[];
   placeholderImage: string;
   collections: SearchCollections_search_edges_node[];
@@ -89,6 +91,7 @@ export interface ProductUpdatePageSubmitData extends ProductUpdatePageFormData {
 }
 
 export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
+  defaultWeightUnit,
   disabled,
   categories: categoryChoiceList,
   collections: collectionChoiceList,
@@ -269,6 +272,15 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                       toggleAll={toggleAll}
                     />
                   ) : (
+                    <>
+                      <ProductShipping
+                        data={data}
+                        disabled={disabled}
+                        errors={errors}
+                        weightUnit={product?.weight?.unit || defaultWeightUnit}
+                        onChange={change}
+                      />
+                      <CardSpacer />
                       <ProductStocks
                         data={data}
                         disabled={disabled}
@@ -296,6 +308,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                           removeStock(id);
                         }}
                       />
+                    </>
                   )}
                   <CardSpacer />
                   <SeoForm

src/products/mutations.ts

@@ -206,6 +206,7 @@ export const simpleProductUpdateMutation = gql`
     $addStocks: [StockInput!]!
     $deleteStocks: [ID!]!
     $updateStocks: [StockInput!]!
+    $weight: WeightScalar
   ) {
     productUpdate(
       id: $id
@@ -220,6 +221,7 @@ export const simpleProductUpdateMutation = gql`
         name: $name
         basePrice: $basePrice
         seo: $seo
+        weight: $weight
       }
     ) {
       errors: productErrors {

src/products/types/SimpleProductUpdate.ts

@@ -770,4 +770,5 @@ export interface SimpleProductUpdateVariables {
   addStocks: StockInput[];
   deleteStocks: string[];
   updateStocks: StockInput[];
+  weight?: any | null;
 }

src/products/utils/data.ts

@@ -181,6 +181,7 @@ export interface ProductUpdatePageFormData {
   seoTitle: string;
   sku: string;
   trackInventory: boolean;
+  weight: string;
 }
 
 export function getProductUpdatePageFormData(
@@ -210,7 +211,8 @@ export function getProductUpdatePageFormData(
           : undefined,
       ""
     ),
-    trackInventory: !!product?.variants[0]?.trackInventory
+    trackInventory: !!product?.variants[0]?.trackInventory,
+    weight: product?.weight?.value.toString() || ""
   };
 }
 

src/products/views/ProductCreate.tsx

@@ -10,7 +10,7 @@ import useCategorySearch from "@saleor/searches/useCategorySearch";
 import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import useProductTypeSearch from "@saleor/searches/useProductTypeSearch";
 import { useWarehouseList } from "@saleor/warehouses/queries";
-import { decimal, maybe } from "../../misc";
+import { decimal, maybe, weight } from "../../misc";
 import ProductCreatePage, {
   ProductCreatePageSubmitData
 } from "../components/ProductCreatePage";
@@ -95,7 +95,8 @@ export const ProductCreateView: React.FC = () => {
                 quantity: parseInt(stock.value, 0),
                 warehouse: stock.id
               })),
-              trackInventory: formData.trackInventory
+              trackInventory: formData.trackInventory,
+              weight: weight(formData.weight)
             }
           });
         };
@@ -157,6 +158,7 @@ export const ProductCreateView: React.FC = () => {
               warehouses={
                 warehouses.data?.warehouses.edges.map(edge => edge.node) || []
               }
+              weightUnit={shop?.defaultWeightUnit}
             />
           </>
         );

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -17,6 +17,7 @@ import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import NotFoundPage from "@saleor/components/NotFoundPage";
 import { useWarehouseList } from "@saleor/warehouses/queries";
+import useShop from "@saleor/hooks/useShop";
 import { getMutationState, maybe } from "../../../misc";
 import ProductUpdatePage from "../../components/ProductUpdatePage";
 import ProductUpdateOperations from "../../containers/ProductUpdateOperations";
@@ -75,6 +76,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
       first: 50
     }
   });
+  const shop = useShop();
 
   const [openModal, closeModal] = createDialogActionHandlers<
     ProductUrlDialog,
@@ -213,6 +215,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                   <ProductUpdatePage
                     categories={categories}
                     collections={collections}
+                    defaultWeightUnit={shop?.defaultWeightUnit}
                     disabled={disableFormSave}
                     errors={errors}
                     fetchCategories={searchCategories}

src/products/views/ProductUpdate/handlers.ts

@@ -1,4 +1,4 @@
-import { decimal } from "@saleor/misc";
+import { decimal, weight } from "@saleor/misc";
 import { ProductUpdatePageSubmitData } from "@saleor/products/components/ProductUpdatePage";
 import { ProductDetails_product } from "@saleor/products/types/ProductDetails";
 import { ProductImageCreateVariables } from "@saleor/products/types/ProductImageCreate";
@@ -48,7 +48,8 @@ export function createUpdateHandler(
           sku: data.sku,
           trackInventory: data.trackInventory
         },
-        updateStocks: data.updateStocks.map(mapFormsetStockToStockInput)
+        updateStocks: data.updateStocks.map(mapFormsetStockToStockInput),
+        weight: weight(data.weight)
       });
     }
   };

src/storybook/stories/products/ProductCreatePage.tsx

@@ -34,6 +34,7 @@ storiesOf("Views / Products / Create product", module)
       onSubmit={() => undefined}
       saveButtonBarState="default"
       warehouses={warehouseList}
+      weightUnit="kg"
     />
   ))
   .add("When loading", () => (
@@ -55,6 +56,7 @@ storiesOf("Views / Products / Create product", module)
       onSubmit={() => undefined}
       saveButtonBarState="default"
       warehouses={undefined}
+      weightUnit="kg"
     />
   ))
   .add("form errors", () => (
@@ -82,5 +84,6 @@ storiesOf("Views / Products / Create product", module)
       onSubmit={() => undefined}
       saveButtonBarState="default"
       warehouses={warehouseList}
+      weightUnit="kg"
     />
   ));

src/storybook/stories/products/ProductUpdatePage.tsx

@@ -19,6 +19,7 @@ const props: ProductUpdatePageProps = {
   ...listActionsProps,
   categories: [product.category],
   collections,
+  defaultWeightUnit: "kg",
   disabled: false,
   errors: [],
   fetchCategories: () => undefined,

src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx

@@ -51,7 +51,9 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
   onSubmit
 }) => {
   const intl = useIntl();
-  const [displayCountry, setDisplayCountry] = useStateFromProps("");
+  const [displayCountry, setDisplayCountry] = useStateFromProps(
+    warehouse?.address?.country.country || ""
+  );
 
   const {
     errors: validationErrors,