Refactor leave action in product update

src/components/Form/Form.tsx

@@ -1,12 +1,14 @@
 import useForm, { UseFormResult } from "@saleor/hooks/useForm";
 import React from "react";
 
+import LeaveScreenDialog from "../LeaveScreenDialog";
+
 export interface FormProps<T> {
   children: (props: UseFormResult<T>) => React.ReactNode;
   confirmLeave?: boolean;
   initial?: T;
   resetOnSubmit?: boolean;
-  onSubmit?: (data: T) => void;
+  onSubmit?: (data: T, nextAction: () => void) => void;
 }
 
 function Form<T>(props: FormProps<T>) {
@@ -32,7 +34,18 @@ function Form<T>(props: FormProps<T>) {
     submit();
   }
 
-  return <form onSubmit={handleSubmit}>{children(renderProps)}</form>;
+  return (
+    <form onSubmit={handleSubmit}>
+      {children(renderProps)}
+      <LeaveScreenDialog
+        onSaveChanges={renderProps.submit}
+        onRejectChanges={renderProps.leaveAction}
+        onClose={() => renderProps.askToLeave(null)}
+        open={!!renderProps.leaveModal}
+        confirmButtonState="default"
+      />
+    </form>
+  );
 }
 Form.displayName = "Form";
 

src/hooks/useForm.ts

@@ -14,6 +14,9 @@ export interface ChangeEvent<TData = any> {
 export type FormChange = (event: ChangeEvent, cb?: () => void) => void;
 
 export interface UseFormResult<T> {
+  askToLeave: (action: () => void | null) => void;
+  leaveAction: () => void | null;
+  leaveModal: boolean;
   change: FormChange;
   data: T;
   hasChanged: boolean;
@@ -51,13 +54,15 @@ function handleRefresh<T extends FormData>(
 
 function useForm<T extends FormData>(
   initial: T,
-  onSubmit: (data: T) => void
+  onSubmit: (data: T, nextAction: () => void) => void
 ): UseFormResult<T> {
   const [hasChanged, setChanged] = useState(false);
   const [data, setData] = useStateFromProps(initial, {
     mergeFunc: merge,
     onRefresh: newData => handleRefresh(data, newData, setChanged)
   });
+  const [leaveModal, setLeaveModal] = useState<boolean>(false);
+  const [leaveAction, setLeaveAction] = useState<() => void>(null);
 
   function toggleValue(event: ChangeEvent, cb?: () => void) {
     const { name, value } = event.target;
@@ -107,17 +112,26 @@ function useForm<T extends FormData>(
   }
 
   function submit() {
-    return onSubmit(data);
+    onSubmit(data, leaveAction);
+    setLeaveModal(false);
   }
 
   function triggerChange() {
     setChanged(true);
   }
 
+  function askToLeave(action: () => void | null) {
+    setLeaveModal(() => !!action);
+    setLeaveAction(() => action);
+  }
+
   return {
+    askToLeave,
     change,
     data,
     hasChanged,
+    leaveAction,
+    leaveModal,
     reset,
     set,
     submit,

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -5,7 +5,6 @@ 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";
@@ -57,8 +56,6 @@ 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[];
@@ -75,7 +72,6 @@ export interface ProductUpdatePageProps extends ListActions {
   saveButtonBarState: ConfirmButtonTransitionState;
   warehouses: WarehouseFragment[];
   taxTypes: TaxTypeFragment[];
-  submitNextAction?: ProductUpdatePageSubmitNextAction;
   fetchCategories: (query: string) => void;
   fetchCollections: (query: string) => void;
   onVariantsAdd: () => void;
@@ -88,13 +84,10 @@ export interface ProductUpdatePageProps extends ListActions {
   onImageReorder?(event: { oldIndex: number; newIndex: number });
   onImageUpload(file: File);
   onSeoClick?();
-  onSubmit?(
-    data: ProductUpdatePageSubmitData,
-    nextAction?: ProductUpdatePageSubmitNextAction
-  );
-  onSubmitSkip?(nextAction?: ProductUpdatePageSubmitNextAction);
+  onSubmit?(data: ProductUpdatePageSubmitData, nextAction?: () => void);
   onVariantAdd?();
   onSetDefaultVariant();
+  onWarehouseConfigure();
 }
 
 export interface ProductUpdatePageSubmitData extends ProductUpdatePageFormData {
@@ -131,12 +124,12 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
   onImageUpload,
   onSeoClick,
   onSubmit,
-  onSubmitSkip,
   onVariantAdd,
   onVariantsAdd,
   onSetDefaultVariant,
   onVariantShow,
   onVariantReorder,
+  onWarehouseConfigure,
   isChecked,
   selected,
   toggle,
@@ -200,11 +193,10 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
       value: taxType.taxCode
     })) || [];
 
-  const [modalWithAction, setModalWithAction] = React.useState<
-    ProductUpdatePageSubmitNextAction
-  >(null);
-
-  const handleSubmit = (data: ProductUpdatePageFormData) => {
+  const handleSubmit = (
+    data: ProductUpdatePageFormData,
+    nextAction: () => void
+  ) => {
     const metadata = isMetadataModified ? data.metadata : undefined;
     const privateMetadata = isPrivateMetadataModified
       ? data.privateMetadata
@@ -221,7 +213,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
           removeStocks: [],
           updateStocks: []
         },
-        modalWithAction
+        nextAction
       );
     } else {
       const dataStocks = stocks.map(stock => stock.id);
@@ -245,15 +237,22 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
               !stockDiff.added.some(addedStock => addedStock === stock.id)
           )
         },
-        modalWithAction
+        nextAction
       );
     }
-    setModalWithAction(null);
   };
 
   return (
     <Form onSubmit={handleSubmit} initial={initialData} confirmLeave>
-      {({ change, data, hasChanged, submit, triggerChange, toggleValue }) => {
+      {({
+        change,
+        data,
+        hasChanged,
+        submit,
+        triggerChange,
+        toggleValue,
+        askToLeave
+      }) => {
         const handleCollectionSelect = createMultiAutocompleteSelectHandler(
           toggleValue,
           setSelectedCollections,
@@ -393,9 +392,9 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                         }}
                         onWarehouseConfigure={() => {
                           if (disabled || !onSubmit || !hasChanged) {
-                            onSubmitSkip("warehouse-configure");
+                            onWarehouseConfigure();
                           } else {
-                            setModalWithAction("warehouse-configure");
+                            askToLeave(onWarehouseConfigure);
                           }
                         }}
                       />
@@ -487,17 +486,6 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                 state={saveButtonBarState}
                 disabled={disabled || !hasChanged}
               />
-              <LeaveScreenDialog
-                onSaveChanges={() => {
-                  submit();
-                }}
-                onRejectChanges={() => {
-                  onSubmitSkip("warehouse-configure");
-                }}
-                onClose={() => setModalWithAction(null)}
-                open={modalWithAction === "warehouse-configure"}
-                confirmButtonState={saveButtonBarState}
-              />
             </Container>
           </>
         );

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -38,9 +38,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { getMutationState, maybe } from "../../../misc";
-import ProductUpdatePage, {
-  ProductUpdatePageSubmitNextAction
-} from "../../components/ProductUpdatePage";
+import ProductUpdatePage from "../../components/ProductUpdatePage";
 import { useProductDetails } from "../../queries";
 import { ProductImageCreateVariables } from "../../types/ProductImageCreate";
 import { ProductUpdate as ProductUpdateMutationResult } from "../../types/ProductUpdate";
@@ -281,14 +279,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     null
   );
 
-  const handleSubmitNextAction = (
-    nextAction?: ProductUpdatePageSubmitNextAction
-  ) => {
-    if (nextAction === "warehouse-configure") {
-      navigate(warehouseListPath);
-    }
-  };
-
   return (
     <>
       <WindowTitle title={maybe(() => data.product.name)} />
@@ -316,11 +306,11 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
         onImageReorder={handleImageReorder}
         onSubmit={async (data, nextAction) => {
           const errors = await handleSubmit(data);
-          if (errors?.length === 0) {
-            handleSubmitNextAction(nextAction);
+          if (errors?.length === 0 && nextAction) {
+            nextAction();
           }
         }}
-        onSubmitSkip={handleSubmitNextAction}
+        onWarehouseConfigure={() => navigate(warehouseListPath)}
         onVariantAdd={handleVariantAdd}
         onVariantsAdd={() => navigate(productVariantCreatorUrl(id))}
         onVariantShow={variantId => () =>

src/storybook/stories/products/ProductUpdatePage.tsx

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