Add redirect on warehouse configuration action

src/components/LeaveScreenDialog/LeaveScreenDialog.tsx

@@ -2,52 +2,54 @@ import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
 import { buttonMessages } from "@saleor/intl";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton";
-import Form from "../Form";
 
 export interface LeaveScreenDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
   open: boolean;
   onClose: () => void;
-  onSubmit: () => void;
+  onSaveChanges: () => void;
+  onRejectChanges: () => void;
 }
 
 const LeaveScreenDialog: React.FC<LeaveScreenDialogProps> = ({
   confirmButtonState,
   onClose,
-  onSubmit,
+  onSaveChanges,
+  onRejectChanges,
   open
 }) => (
   <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
-    <Form onSubmit={onSubmit}>
+    <DialogTitle>
-      {({ submit }) => (
+      <FormattedMessage
-        <>
+        defaultMessage="You're leaving this screen"
-          <DialogContent>
+        description="leaving screen warning header"
-            <FormattedMessage
+      />
-              defaultMessage="You're leaving this screen. Do you want to save previously made changes?"
+    </DialogTitle>
-              description="leaving screen warning message"
+    <DialogContent>
-            />
+      <FormattedMessage
-          </DialogContent>
+        defaultMessage="Do you want to save previously made changes?"
-          <DialogActions>
+        description="leaving screen warning message"
-            <Button onClick={onClose}>
+      />
-              <FormattedMessage {...buttonMessages.cancel} />
+    </DialogContent>
-            </Button>
+    <DialogActions>
-            <ConfirmButton
+      <Button onClick={onRejectChanges}>
-              transitionState={confirmButtonState}
+        <FormattedMessage {...buttonMessages.no} />
-              color="primary"
+      </Button>
-              variant="contained"
+      <ConfirmButton
-              onClick={submit}
+        transitionState={confirmButtonState}
-            >
+        color="primary"
-              <FormattedMessage {...buttonMessages.save} />
+        variant="contained"
-            </ConfirmButton>
+        onClick={onSaveChanges}
-          </DialogActions>
+      >
-        </>
+        <FormattedMessage {...buttonMessages.yes} />
-      )}
+      </ConfirmButton>
-    </Form>
+    </DialogActions>
   </Dialog>
 );
 LeaveScreenDialog.displayName = "LeaveScreenDialog";

src/intl.ts

@@ -136,6 +136,10 @@ export const buttonMessages = defineMessages({
     defaultMessage: "Next",
     description: "go to next step, button"
   },
+  no: {
+    defaultMessage: "No",
+    description: "button"
+  },
   ok: {
     defaultMessage: "OK",
     description: "button"
@@ -163,6 +167,10 @@ export const buttonMessages = defineMessages({
   undo: {
     defaultMessage: "Undo",
     description: "button"
+  },
+  yes: {
+    defaultMessage: "Yes",
+    description: "button"
   }
 });
 

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -5,6 +5,7 @@ import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
+import LeaveScreenDialog from "@saleor/components/LeaveScreenDialog";
 import Metadata, { MetadataFormData } from "@saleor/components/Metadata";
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
 import PageHeader from "@saleor/components/PageHeader";
@@ -78,6 +79,8 @@ export interface ProductCreatePageSubmitData extends FormData {
   stocks: ProductStockInput[];
 }
 
+export type ProductCreatePageSubmitNextAction = "warehouse-configure";
+
 interface ProductCreatePageProps {
   errors: ProductErrorFragment[];
   collections: SearchCollections_search_edges_node[];
@@ -98,12 +101,14 @@ interface ProductCreatePageProps {
   weightUnit: string;
   warehouses: SearchWarehouses_search_edges_node[];
   taxTypes: TaxTypeFragment[];
+  submitNextAction?: ProductCreatePageSubmitNextAction;
   fetchCategories: (data: string) => void;
   fetchCollections: (data: string) => void;
   fetchProductTypes: (data: string) => void;
-  onWarehouseConfigure: () => void;
   onBack?();
   onSubmit?(data: ProductCreatePageSubmitData);
+  onSubmitReject?(nextAction?: ProductCreatePageSubmitNextAction);
+  setSubmitNextAction?(nextAction: ProductCreatePageSubmitNextAction);
 }
 
 export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
@@ -123,10 +128,12 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   warehouses,
   taxTypes,
   onBack,
-  onWarehouseConfigure,
   fetchProductTypes,
   weightUnit,
-  onSubmit
+  onSubmit,
+  onSubmitReject,
+  submitNextAction,
+  setSubmitNextAction
 }: ProductCreatePageProps) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
@@ -323,7 +330,12 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                         triggerChange();
                         removeStock(id);
                       }}
-                      onWarehouseConfigure={onWarehouseConfigure}
+                      onWarehouseConfigure={() => {
+                        setSubmitNextAction("warehouse-configure");
+                        if (disabled || !onSubmit || !hasChanged) {
+                          onSubmitReject("warehouse-configure");
+                        }
+                      }}
                     />
                     <CardSpacer />
                   </>
@@ -412,6 +424,17 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
               state={saveButtonBarState}
               disabled={disabled || !onSubmit || !hasChanged}
             />
+            <LeaveScreenDialog
+              onSaveChanges={() => {
+                submit();
+              }}
+              onRejectChanges={() => {
+                onSubmitReject("warehouse-configure");
+              }}
+              onClose={() => setSubmitNextAction(null)}
+              open={submitNextAction === "warehouse-configure"}
+              confirmButtonState={saveButtonBarState}
+            />
           </Container>
         );
       }}

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -5,6 +5,7 @@ import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
+import LeaveScreenDialog from "@saleor/components/LeaveScreenDialog";
 import Metadata from "@saleor/components/Metadata/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
@@ -56,6 +57,8 @@ import ProductStocks, { ProductStockInput } from "../ProductStocks";
 import ProductTaxes from "../ProductTaxes";
 import ProductVariants from "../ProductVariants";
 
+export type ProductUpdatePageSubmitNextAction = "warehouse-configure";
+
 export interface ProductUpdatePageProps extends ListActions {
   defaultWeightUnit: string;
   errors: ProductErrorFragment[];
@@ -72,6 +75,7 @@ export interface ProductUpdatePageProps extends ListActions {
   saveButtonBarState: ConfirmButtonTransitionState;
   warehouses: WarehouseFragment[];
   taxTypes: TaxTypeFragment[];
+  submitNextAction?: ProductUpdatePageSubmitNextAction;
   fetchCategories: (query: string) => void;
   fetchCollections: (query: string) => void;
   onVariantsAdd: () => void;
@@ -85,6 +89,8 @@ export interface ProductUpdatePageProps extends ListActions {
   onImageUpload(file: File);
   onSeoClick?();
   onSubmit?(data: ProductUpdatePageSubmitData);
+  onSubmitReject?(nextAction?: ProductUpdatePageSubmitNextAction);
+  setSubmitNextAction?(nextAction: ProductUpdatePageSubmitNextAction);
   onVariantAdd?();
   onSetDefaultVariant();
   onWarehouseConfigure();
@@ -124,17 +130,19 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
   onImageUpload,
   onSeoClick,
   onSubmit,
+  onSubmitReject,
   onVariantAdd,
   onVariantsAdd,
   onSetDefaultVariant,
   onVariantShow,
   onVariantReorder,
-  onWarehouseConfigure,
   isChecked,
   selected,
   toggle,
   toggleAll,
-  toolbar
+  toolbar,
+  submitNextAction,
+  setSubmitNextAction
 }) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
@@ -372,7 +380,12 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                           triggerChange();
                           removeStock(id);
                         }}
-                        onWarehouseConfigure={onWarehouseConfigure}
+                        onWarehouseConfigure={() => {
+                          setSubmitNextAction("warehouse-configure");
+                          if (disabled || !onSubmit || !hasChanged) {
+                            onSubmitReject("warehouse-configure");
+                          }
+                        }}
                       />
                     </>
                   )}
@@ -462,6 +475,17 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                 state={saveButtonBarState}
                 disabled={disabled || !hasChanged}
               />
+              <LeaveScreenDialog
+                onSaveChanges={() => {
+                  submit();
+                }}
+                onRejectChanges={() => {
+                  onSubmitReject("warehouse-configure");
+                }}
+                onClose={() => setSubmitNextAction(null)}
+                open={submitNextAction === "warehouse-configure"}
+                confirmButtonState={saveButtonBarState}
+              />
             </Container>
           </>
         );

src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx

@@ -4,6 +4,7 @@ import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
+import LeaveScreenDialog from "@saleor/components/LeaveScreenDialog";
 import Metadata, { MetadataFormData } from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
@@ -45,6 +46,8 @@ export interface ProductVariantCreatePageSubmitData
   stocks: ProductStockInput[];
 }
 
+export type ProductVariantCreatePageSubmitNextAction = "warehouse-configure";
+
 interface ProductVariantCreatePageProps {
   currencySymbol: string;
   disabled: boolean;
@@ -54,11 +57,17 @@ interface ProductVariantCreatePageProps {
   saveButtonBarState: ConfirmButtonTransitionState;
   warehouses: SearchWarehouses_search_edges_node[];
   weightUnit: string;
+  submitNextAction?: ProductVariantCreatePageSubmitNextAction;
   onBack: () => void;
   onSubmit: (data: ProductVariantCreatePageSubmitData) => void;
+  onSubmitReject?: (
+    nextAction?: ProductVariantCreatePageSubmitNextAction
+  ) => void;
+  setSubmitNextAction?: (
+    nextAction: ProductVariantCreatePageSubmitNextAction
+  ) => void;
   onVariantClick: (variantId: string) => void;
   onVariantReorder: ReorderAction;
-  onWarehouseConfigure: () => void;
 }
 
 const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
@@ -72,9 +81,11 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
   weightUnit,
   onBack,
   onSubmit,
+  onSubmitReject,
   onVariantClick,
   onVariantReorder,
-  onWarehouseConfigure
+  submitNextAction,
+  setSubmitNextAction
 }) => {
   const intl = useIntl();
   const attributeInput = React.useMemo(
@@ -190,7 +201,12 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                     triggerChange();
                     removeStock(id);
                   }}
-                  onWarehouseConfigure={onWarehouseConfigure}
+                  onWarehouseConfigure={() => {
+                    setSubmitNextAction("warehouse-configure");
+                    if (disabled || !onSubmit || !hasChanged) {
+                      onSubmitReject("warehouse-configure");
+                    }
+                  }}
                 />
                 <CardSpacer />
                 <Metadata data={data} onChange={changeMetadata} />
@@ -212,6 +228,17 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
               onCancel={onBack}
               onSave={submit}
             />
+            <LeaveScreenDialog
+              onSaveChanges={() => {
+                submit();
+              }}
+              onRejectChanges={() => {
+                onSubmitReject("warehouse-configure");
+              }}
+              onClose={() => setSubmitNextAction(null)}
+              open={submitNextAction === "warehouse-configure"}
+              confirmButtonState={saveButtonBarState}
+            />
           </Container>
         );
       }}

src/products/components/ProductVariantPage/ProductVariantPage.tsx

@@ -4,6 +4,7 @@ import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
+import LeaveScreenDialog from "@saleor/components/LeaveScreenDialog";
 import { MetadataFormData } from "@saleor/components/Metadata";
 import Metadata from "@saleor/components/Metadata/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
@@ -53,6 +54,8 @@ export interface ProductVariantPageSubmitData
   removeStocks: string[];
 }
 
+export type ProductVariantPageSubmitNextAction = "warehouse-configure";
+
 interface ProductVariantPageProps {
   defaultWeightUnit: string;
   variant?: ProductVariant;
@@ -62,11 +65,14 @@ interface ProductVariantPageProps {
   placeholderImage?: string;
   header: string;
   warehouses: WarehouseFragment[];
+  submitNextAction?: ProductVariantPageSubmitNextAction;
   onVariantReorder: ReorderAction;
   onAdd();
   onBack();
   onDelete();
   onSubmit(data: ProductVariantPageSubmitData);
+  onSubmitReject?(nextAction?: ProductVariantPageSubmitNextAction);
+  setSubmitNextAction?(nextAction: ProductVariantPageSubmitNextAction);
   onImageSelect(id: string);
   onVariantClick(variantId: string);
   onSetDefaultVariant();
@@ -87,10 +93,13 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
   onDelete,
   onImageSelect,
   onSubmit,
+  onSubmitReject,
   onVariantClick,
   onVariantReorder,
   onSetDefaultVariant,
-  onWarehouseConfigure
+  onWarehouseConfigure,
+  submitNextAction,
+  setSubmitNextAction
 }) => {
   const attributeInput = React.useMemo(
     () => getAttributeInputFromVariant(variant),
@@ -266,7 +275,12 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                         triggerChange();
                         removeStock(id);
                       }}
-                      onWarehouseConfigure={onWarehouseConfigure}
+                      onWarehouseConfigure={() => {
+                        setSubmitNextAction("warehouse-configure");
+                        if (!onSubmit || !hasChanged) {
+                          onSubmitReject("warehouse-configure");
+                        }
+                      }}
                     />
                     <CardSpacer />
                     <Metadata data={data} onChange={changeMetadata} />
@@ -279,6 +293,17 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                   onDelete={onDelete}
                   onSave={submit}
                 />
+                <LeaveScreenDialog
+                  onSaveChanges={() => {
+                    submit();
+                  }}
+                  onRejectChanges={() => {
+                    onSubmitReject("warehouse-configure");
+                  }}
+                  onClose={() => setSubmitNextAction(null)}
+                  open={submitNextAction === "warehouse-configure"}
+                  confirmButtonState={saveButtonBarState}
+                />
               </>
             );
           }}

src/products/views/ProductCreate.tsx

@@ -1,4 +1,3 @@
-import LeaveScreenDialog from "@saleor/components/LeaveScreenDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
 import useNavigator from "@saleor/hooks/useNavigator";
@@ -22,28 +21,20 @@ import { useIntl } from "react-intl";
 
 import { decimal, weight } from "../../misc";
 import ProductCreatePage, {
-  ProductCreatePageSubmitData
+  ProductCreatePageSubmitData,
+  ProductCreatePageSubmitNextAction
 } from "../components/ProductCreatePage";
 import {
   useProductCreateMutation,
   useProductSetAvailabilityForPurchase
 } from "../mutations";
-import {
+import { ProductAddUrlQueryParams, productListUrl, productUrl } from "../urls";
-  productAddUrl,
-  ProductAddUrlDialog,
-  ProductAddUrlQueryParams,
-  productListUrl,
-  productUrl
-} from "../urls";
 
 interface ProductCreateViewProps {
   params: ProductAddUrlQueryParams;
 }
 
-export const ProductCreateView: React.FC<ProductCreateViewProps> = ({
+export const ProductCreateView: React.FC<ProductCreateViewProps> = ({}) => {
-  params
-}) => {
-  const { action } = params;
   const navigate = useNavigator();
   const notify = useNotifier();
   const shop = useShop();
@@ -87,7 +78,7 @@ export const ProductCreateView: React.FC<ProductCreateViewProps> = ({
   ] = useProductSetAvailabilityForPurchase({
     onCompleted: data => {
       const errors = data?.productSetAvailabilityForPurchase?.errors;
-      if (errors?.length === 0) {
+      if (errors?.length === 0 && !submitNextAction) {
         navigate(productUrl(data.productSetAvailabilityForPurchase.product.id));
       }
     }
@@ -106,11 +97,6 @@ export const ProductCreateView: React.FC<ProductCreateViewProps> = ({
     }
   });
 
-  const [openModal, closeModal] = createDialogActionHandlers<
-    ProductAddUrlDialog,
-    ProductAddUrlQueryParams
-  >(navigate, productAddUrl, params);
-
   const handleCreate = async (formData: ProductCreatePageSubmitData) => {
     const result = await productCreate({
       variables: {
@@ -171,6 +157,18 @@ export const ProductCreateView: React.FC<ProductCreateViewProps> = ({
     updatePrivateMetadata
   );
 
+  const [submitNextAction, setSubmitNextAction] = React.useState<
+    ProductCreatePageSubmitNextAction
+  >(null);
+  const handleSubmitNextAction = (
+    nextAction?: ProductCreatePageSubmitNextAction
+  ) => {
+    const action = nextAction || submitNextAction;
+    if (action === "warehouse-configure") {
+      navigate(warehouseListPath);
+    }
+  };
+
   return (
     <>
       <WindowTitle
@@ -200,7 +198,15 @@ export const ProductCreateView: React.FC<ProductCreateViewProps> = ({
           edge => edge.node
         )}
         onBack={handleBack}
-        onSubmit={handleSubmit}
+        onSubmit={async data => {
+          const errors = await handleSubmit(data);
+          if (errors?.length === 0) {
+            handleSubmitNextAction();
+          } else {
+            setSubmitNextAction(null);
+          }
+        }}
+        onSubmitReject={handleSubmitNextAction}
         saveButtonBarState={productCreateOpts.status}
         fetchMoreCategories={{
           hasMore: searchCategoryOpts.data?.search.pageInfo.hasNextPage,
@@ -217,19 +223,14 @@ export const ProductCreateView: React.FC<ProductCreateViewProps> = ({
           loading: searchProductTypesOpts.loading,
           onFetchMore: loadMoreProductTypes
         }}
-        onWarehouseConfigure={() => openModal("leave-screen")}
+        submitNextAction={submitNextAction}
+        setSubmitNextAction={setSubmitNextAction}
         warehouses={
           warehouses.data?.warehouses.edges.map(edge => edge.node) || []
         }
         taxTypes={taxTypes.data?.taxTypes || []}
         weightUnit={shop?.defaultWeightUnit}
       />
-      <LeaveScreenDialog
-        onSubmit={() => navigate(warehouseListPath)}
-        onClose={closeModal}
-        open={action === "leave-screen"}
-        confirmButtonState="default"
-      />
     </>
   );
 };

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -3,7 +3,6 @@ import DialogContentText from "@material-ui/core/DialogContentText";
 import IconButton from "@material-ui/core/IconButton";
 import DeleteIcon from "@material-ui/icons/Delete";
 import ActionDialog from "@saleor/components/ActionDialog";
-import LeaveScreenDialog from "@saleor/components/LeaveScreenDialog";
 import NotFoundPage from "@saleor/components/NotFoundPage";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
@@ -39,7 +38,9 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { getMutationState, maybe } from "../../../misc";
-import ProductUpdatePage from "../../components/ProductUpdatePage";
+import ProductUpdatePage, {
+  ProductUpdatePageSubmitNextAction
+} from "../../components/ProductUpdatePage";
 import { useProductDetails } from "../../queries";
 import { ProductImageCreateVariables } from "../../types/ProductImageCreate";
 import { ProductUpdate as ProductUpdateMutationResult } from "../../types/ProductUpdate";
@@ -66,7 +67,6 @@ interface ProductUpdateProps {
 }
 
 export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
-  const { action } = params;
   const navigate = useNavigator();
   const notify = useNotifier();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
@@ -281,6 +281,18 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     null
   );
 
+  const [submitNextAction, setSubmitNextAction] = React.useState<
+    ProductUpdatePageSubmitNextAction
+  >(null);
+  const handleSubmitNextAction = (
+    nextAction?: ProductUpdatePageSubmitNextAction
+  ) => {
+    const action = nextAction || submitNextAction;
+    if (action === "warehouse-configure") {
+      navigate(warehouseListPath);
+    }
+  };
+
   return (
     <>
       <WindowTitle title={maybe(() => data.product.name)} />
@@ -306,7 +318,15 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
         onBack={handleBack}
         onDelete={() => openModal("remove")}
         onImageReorder={handleImageReorder}
-        onSubmit={handleSubmit}
+        onSubmit={async data => {
+          const errors = await handleSubmit(data);
+          if (errors?.length === 0) {
+            handleSubmitNextAction();
+          } else {
+            setSubmitNextAction(null);
+          }
+        }}
+        onSubmitReject={handleSubmitNextAction}
         onVariantAdd={handleVariantAdd}
         onVariantsAdd={() => navigate(productVariantCreatorUrl(id))}
         onVariantShow={variantId => () =>
@@ -315,7 +335,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
         onImageUpload={handleImageUpload}
         onImageEdit={handleImageEdit}
         onImageDelete={handleImageDelete}
-        onWarehouseConfigure={() => openModal("leave-screen")}
         toolbar={
           <IconButton
             color="primary"
@@ -346,6 +365,8 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
           loading: searchCollectionsOpts.loading,
           onFetchMore: loadMoreCollections
         }}
+        submitNextAction={submitNextAction}
+        setSubmitNextAction={setSubmitNextAction}
       />
       <ActionDialog
         open={params.action === "remove"}
@@ -396,12 +417,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
           />
         </DialogContentText>
       </ActionDialog>
-      <LeaveScreenDialog
-        onSubmit={() => navigate(warehouseListPath)}
-        onClose={closeModal}
-        open={action === "leave-screen"}
-        confirmButtonState="default"
-      />
     </>
   );
 };

src/products/views/ProductVariant.tsx

@@ -21,7 +21,8 @@ import { useIntl } from "react-intl";
 import { decimal, weight } from "../../misc";
 import ProductVariantDeleteDialog from "../components/ProductVariantDeleteDialog";
 import ProductVariantPage, {
-  ProductVariantPageSubmitData
+  ProductVariantPageSubmitData,
+  ProductVariantPageSubmitNextAction
 } from "../components/ProductVariantPage";
 import {
   useProductVariantReorderMutation,
@@ -199,6 +200,18 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
     variables => updatePrivateMetadata({ variables })
   );
 
+  const [submitNextAction, setSubmitNextAction] = React.useState<
+    ProductVariantPageSubmitNextAction
+  >(null);
+  const handleSubmitNextAction = (
+    nextAction?: ProductVariantPageSubmitNextAction
+  ) => {
+    const action = nextAction || submitNextAction;
+    if (action === "warehouse-configure") {
+      navigate(warehouseListPath);
+    }
+  };
+
   return (
     <>
       <WindowTitle title={data?.productVariant?.name} />
@@ -218,12 +231,21 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
         onBack={handleBack}
         onDelete={() => openModal("remove")}
         onImageSelect={handleImageSelect}
-        onSubmit={handleSubmit}
+        onSubmit={async data => {
+          const errors = await handleSubmit(data);
+          if (errors?.length === 0) {
+            handleSubmitNextAction();
+          } else {
+            setSubmitNextAction(null);
+          }
+        }}
+        onSubmitReject={handleSubmitNextAction}
         onVariantClick={variantId => {
           navigate(productVariantEditUrl(productId, variantId));
         }}
         onVariantReorder={handleVariantReorder}
-        onWarehouseConfigure={() => openModal("leave-screen")}
+        submitNextAction={submitNextAction}
+        setSubmitNextAction={setSubmitNextAction}
       />
       <ProductVariantDeleteDialog
         confirmButtonState={deleteVariantOpts.status}
@@ -239,7 +261,8 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
         name={data?.productVariant?.name}
       />
       <LeaveScreenDialog
-        onSubmit={() => navigate(warehouseListPath)}
+        onSaveChanges={() => navigate(warehouseListPath)}
+        onRejectChanges={() => navigate(warehouseListPath)}
         onClose={closeModal}
         open={action === "leave-screen"}
         confirmButtonState="default"

src/products/views/ProductVariantCreate.tsx

@@ -1,11 +1,9 @@
-import LeaveScreenDialog from "@saleor/components/LeaveScreenDialog";
 import NotFoundPage from "@saleor/components/NotFoundPage";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages } from "@saleor/intl";
-import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import {
   useMetadataUpdate,
@@ -18,7 +16,8 @@ import { useIntl } from "react-intl";
 
 import { decimal, weight } from "../../misc";
 import ProductVariantCreatePage, {
-  ProductVariantCreatePageSubmitData
+  ProductVariantCreatePageSubmitData,
+  ProductVariantCreatePageSubmitNextAction
 } from "../components/ProductVariantCreatePage";
 import {
   useProductVariantReorderMutation,
@@ -28,8 +27,6 @@ import { useProductVariantCreateQuery } from "../queries";
 import {
   productListUrl,
   productUrl,
-  productVariantAddUrl,
-  ProductVariantAddUrlDialog,
   ProductVariantAddUrlQueryParams,
   productVariantEditUrl
 } from "../urls";
@@ -41,10 +38,8 @@ interface ProductVariantCreateProps {
 }
 
 export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
-  productId,
+  productId
-  params
 }) => {
-  const { action } = params;
   const navigate = useNavigator();
   const notify = useNotifier();
   const shop = useShop();
@@ -63,7 +58,7 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
 
   const [variantCreate, variantCreateResult] = useVariantCreateMutation({
     onCompleted: data => {
-      if (data.productVariantCreate.errors.length === 0) {
+      if (data.productVariantCreate.errors.length === 0 && !submitNextAction) {
         notify({
           status: "success",
           text: intl.formatMessage(commonMessages.savedChanges)
@@ -95,11 +90,6 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
     reorderProductVariants({ variables })
   );
 
-  const [openModal, closeModal] = createDialogActionHandlers<
-    ProductVariantAddUrlDialog,
-    ProductVariantAddUrlQueryParams
-  >(navigate, params => productVariantAddUrl(productId, params), params);
-
   const handleBack = () => navigate(productUrl(productId));
   const handleCreate = async (formData: ProductVariantCreatePageSubmitData) => {
     const result = await variantCreate({
@@ -135,6 +125,18 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
   const handleVariantClick = (id: string) =>
     navigate(productVariantEditUrl(productId, id));
 
+  const [submitNextAction, setSubmitNextAction] = React.useState<
+    ProductVariantCreatePageSubmitNextAction
+  >(null);
+  const handleSubmitNextAction = (
+    nextAction?: ProductVariantCreatePageSubmitNextAction
+  ) => {
+    const action = nextAction || submitNextAction;
+    if (action === "warehouse-configure") {
+      navigate(warehouseListPath);
+    }
+  };
+
   const disableForm =
     productLoading ||
     variantCreateResult.loading ||
@@ -158,21 +160,24 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
         })}
         product={data?.product}
         onBack={handleBack}
-        onSubmit={handleSubmit}
+        onSubmit={async data => {
+          const errors = await handleSubmit(data);
+          if (errors?.length === 0) {
+            handleSubmitNextAction();
+          } else {
+            setSubmitNextAction(null);
+          }
+        }}
+        onSubmitReject={handleSubmitNextAction}
         onVariantClick={handleVariantClick}
         onVariantReorder={handleVariantReorder}
-        onWarehouseConfigure={() => openModal("leave-screen")}
         saveButtonBarState={variantCreateResult.status}
         warehouses={
           warehouses.data?.warehouses.edges.map(edge => edge.node) || []
         }
         weightUnit={shop?.defaultWeightUnit}
-      />
+        submitNextAction={submitNextAction}
-      <LeaveScreenDialog
+        setSubmitNextAction={setSubmitNextAction}
-        onSubmit={() => navigate(warehouseListPath)}
-        onClose={closeModal}
-        open={action === "leave-screen"}
-        confirmButtonState="default"
       />
     </>
   );

src/storybook/stories/products/ProductCreatePage.tsx

@@ -37,7 +37,6 @@ storiesOf("Views / Products / Create product", module)
       warehouses={warehouseList}
       taxTypes={taxTypes}
       weightUnit="kg"
-      onWarehouseConfigure={() => undefined}
     />
   ))
   .add("When loading", () => (
@@ -61,7 +60,6 @@ storiesOf("Views / Products / Create product", module)
       warehouses={undefined}
       taxTypes={taxTypes}
       weightUnit="kg"
-      onWarehouseConfigure={() => undefined}
     />
   ))
   .add("form errors", () => (
@@ -91,6 +89,5 @@ storiesOf("Views / Products / Create product", module)
       warehouses={warehouseList}
       taxTypes={taxTypes}
       weightUnit="kg"
-      onWarehouseConfigure={() => undefined}
     />
   ));

src/storybook/stories/products/ProductUpdatePage.tsx

@@ -39,7 +39,6 @@ const props: ProductUpdatePageProps = {
   onVariantReorder: () => undefined,
   onVariantShow: () => undefined,
   onVariantsAdd: () => undefined,
-  onWarehouseConfigure: () => undefined,
   placeholderImage,
   product,
   saveButtonBarState: "default",

src/storybook/stories/products/ProductVariantCreatePage.tsx

@@ -26,7 +26,6 @@ storiesOf("Views / Products / Create product variant", module)
       onVariantReorder={() => undefined}
       saveButtonBarState="default"
       warehouses={warehouseList}
-      onWarehouseConfigure={() => undefined}
     />
   ))
   .add("with errors", () => (
@@ -59,7 +58,6 @@ storiesOf("Views / Products / Create product variant", module)
       onVariantReorder={() => undefined}
       saveButtonBarState="default"
       warehouses={warehouseList}
-      onWarehouseConfigure={() => undefined}
     />
   ))
   .add("when loading data", () => (
@@ -76,7 +74,6 @@ storiesOf("Views / Products / Create product variant", module)
       onVariantReorder={() => undefined}
       saveButtonBarState="default"
       warehouses={warehouseList}
-      onWarehouseConfigure={() => undefined}
     />
   ))
   .add("add first variant", () => (
@@ -96,6 +93,5 @@ storiesOf("Views / Products / Create product variant", module)
       onVariantReorder={() => undefined}
       saveButtonBarState="default"
       warehouses={warehouseList}
-      onWarehouseConfigure={() => undefined}
     />
   ));

src/storybook/stories/products/ProductVariantPage.tsx

@@ -28,7 +28,6 @@ storiesOf("Views / Products / Product variant details", module)
       onVariantReorder={() => undefined}
       saveButtonBarState="default"
       warehouses={warehouseList}
-      onWarehouseConfigure={() => undefined}
     />
   ))
   .add("when loading data", () => (
@@ -48,7 +47,6 @@ storiesOf("Views / Products / Product variant details", module)
       onVariantReorder={() => undefined}
       saveButtonBarState="default"
       warehouses={warehouseList}
-      onWarehouseConfigure={() => undefined}
     />
   ))
   .add("attribute errors", () => (
@@ -84,6 +82,5 @@ storiesOf("Views / Products / Product variant details", module)
         ...error
       }))}
       warehouses={warehouseList}
-      onWarehouseConfigure={() => undefined}
     />
   ));