diff --git a/src/components/LeaveScreenDialog/LeaveScreenDialog.tsx b/src/components/LeaveScreenDialog/LeaveScreenDialog.tsx index e15aba9f8..6f64856db 100644 --- a/src/components/LeaveScreenDialog/LeaveScreenDialog.tsx +++ b/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 = ({ confirmButtonState, onClose, - onSubmit, + onSaveChanges, + onRejectChanges, open }) => ( -
- {({ submit }) => ( - <> - - - - - - - - - - - )} -
+ + + + + + + + + + + +
); LeaveScreenDialog.displayName = "LeaveScreenDialog"; diff --git a/src/intl.ts b/src/intl.ts index 6fe6a3e68..18fd659d2 100644 --- a/src/intl.ts +++ b/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" } }); diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx index b96d702fd..62167700f 100644 --- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx +++ b/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 = ({ @@ -123,10 +128,12 @@ export const ProductCreatePage: React.FC = ({ 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 = ({ triggerChange(); removeStock(id); }} - onWarehouseConfigure={onWarehouseConfigure} + onWarehouseConfigure={() => { + setSubmitNextAction("warehouse-configure"); + if (disabled || !onSubmit || !hasChanged) { + onSubmitReject("warehouse-configure"); + } + }} /> @@ -412,6 +424,17 @@ export const ProductCreatePage: React.FC = ({ state={saveButtonBarState} disabled={disabled || !onSubmit || !hasChanged} /> + { + submit(); + }} + onRejectChanges={() => { + onSubmitReject("warehouse-configure"); + }} + onClose={() => setSubmitNextAction(null)} + open={submitNextAction === "warehouse-configure"} + confirmButtonState={saveButtonBarState} + /> ); }} diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx index 13e56879d..6efc10bd1 100644 --- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx +++ b/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 = ({ 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 = ({ 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 = ({ state={saveButtonBarState} disabled={disabled || !hasChanged} /> + { + submit(); + }} + onRejectChanges={() => { + onSubmitReject("warehouse-configure"); + }} + onClose={() => setSubmitNextAction(null)} + open={submitNextAction === "warehouse-configure"} + confirmButtonState={saveButtonBarState} + /> ); diff --git a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx index 8c345e4f2..2f7c5dceb 100644 --- a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx +++ b/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 = ({ @@ -72,9 +81,11 @@ const ProductVariantCreatePage: React.FC = ({ weightUnit, onBack, onSubmit, + onSubmitReject, onVariantClick, onVariantReorder, - onWarehouseConfigure + submitNextAction, + setSubmitNextAction }) => { const intl = useIntl(); const attributeInput = React.useMemo( @@ -190,7 +201,12 @@ const ProductVariantCreatePage: React.FC = ({ triggerChange(); removeStock(id); }} - onWarehouseConfigure={onWarehouseConfigure} + onWarehouseConfigure={() => { + setSubmitNextAction("warehouse-configure"); + if (disabled || !onSubmit || !hasChanged) { + onSubmitReject("warehouse-configure"); + } + }} /> @@ -212,6 +228,17 @@ const ProductVariantCreatePage: React.FC = ({ onCancel={onBack} onSave={submit} /> + { + submit(); + }} + onRejectChanges={() => { + onSubmitReject("warehouse-configure"); + }} + onClose={() => setSubmitNextAction(null)} + open={submitNextAction === "warehouse-configure"} + confirmButtonState={saveButtonBarState} + /> ); }} diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx index d875acf0d..84237a75e 100644 --- a/src/products/components/ProductVariantPage/ProductVariantPage.tsx +++ b/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 = ({ 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 = ({ triggerChange(); removeStock(id); }} - onWarehouseConfigure={onWarehouseConfigure} + onWarehouseConfigure={() => { + setSubmitNextAction("warehouse-configure"); + if (!onSubmit || !hasChanged) { + onSubmitReject("warehouse-configure"); + } + }} /> @@ -279,6 +293,17 @@ const ProductVariantPage: React.FC = ({ onDelete={onDelete} onSave={submit} /> + { + submit(); + }} + onRejectChanges={() => { + onSubmitReject("warehouse-configure"); + }} + onClose={() => setSubmitNextAction(null)} + open={submitNextAction === "warehouse-configure"} + confirmButtonState={saveButtonBarState} + /> ); }} diff --git a/src/products/views/ProductCreate.tsx b/src/products/views/ProductCreate.tsx index ff7c342a7..28c618ee2 100644 --- a/src/products/views/ProductCreate.tsx +++ b/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 { - productAddUrl, - ProductAddUrlDialog, - ProductAddUrlQueryParams, - productListUrl, - productUrl -} from "../urls"; +import { ProductAddUrlQueryParams, productListUrl, productUrl } from "../urls"; interface ProductCreateViewProps { params: ProductAddUrlQueryParams; } -export const ProductCreateView: React.FC = ({ - params -}) => { - const { action } = params; +export const ProductCreateView: React.FC = ({}) => { const navigate = useNavigator(); const notify = useNotifier(); const shop = useShop(); @@ -87,7 +78,7 @@ export const ProductCreateView: React.FC = ({ ] = 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 = ({ } }); - 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 = ({ updatePrivateMetadata ); + const [submitNextAction, setSubmitNextAction] = React.useState< + ProductCreatePageSubmitNextAction + >(null); + const handleSubmitNextAction = ( + nextAction?: ProductCreatePageSubmitNextAction + ) => { + const action = nextAction || submitNextAction; + if (action === "warehouse-configure") { + navigate(warehouseListPath); + } + }; + return ( <> = ({ 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 = ({ 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} /> - navigate(warehouseListPath)} - onClose={closeModal} - open={action === "leave-screen"} - confirmButtonState="default" - /> ); }; diff --git a/src/products/views/ProductUpdate/ProductUpdate.tsx b/src/products/views/ProductUpdate/ProductUpdate.tsx index 7713b9e0d..07d76ca3d 100644 --- a/src/products/views/ProductUpdate/ProductUpdate.tsx +++ b/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 = ({ 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 = ({ 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 ( <> data.product.name)} /> @@ -306,7 +318,15 @@ export const ProductUpdate: React.FC = ({ 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 = ({ id, params }) => { onImageUpload={handleImageUpload} onImageEdit={handleImageEdit} onImageDelete={handleImageDelete} - onWarehouseConfigure={() => openModal("leave-screen")} toolbar={ = ({ id, params }) => { loading: searchCollectionsOpts.loading, onFetchMore: loadMoreCollections }} + submitNextAction={submitNextAction} + setSubmitNextAction={setSubmitNextAction} /> = ({ id, params }) => { /> - navigate(warehouseListPath)} - onClose={closeModal} - open={action === "leave-screen"} - confirmButtonState="default" - /> ); }; diff --git a/src/products/views/ProductVariant.tsx b/src/products/views/ProductVariant.tsx index d972cce90..0e54674c2 100644 --- a/src/products/views/ProductVariant.tsx +++ b/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 = ({ 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 ( <> @@ -218,12 +231,21 @@ export const ProductVariant: React.FC = ({ 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} /> = ({ name={data?.productVariant?.name} /> navigate(warehouseListPath)} + onSaveChanges={() => navigate(warehouseListPath)} + onRejectChanges={() => navigate(warehouseListPath)} onClose={closeModal} open={action === "leave-screen"} confirmButtonState="default" diff --git a/src/products/views/ProductVariantCreate.tsx b/src/products/views/ProductVariantCreate.tsx index b758ac83e..1e441c46b 100644 --- a/src/products/views/ProductVariantCreate.tsx +++ b/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 = ({ - productId, - params + productId }) => { - const { action } = params; const navigate = useNavigator(); const notify = useNotifier(); const shop = useShop(); @@ -63,7 +58,7 @@ export const ProductVariant: React.FC = ({ 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 = ({ 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 = ({ 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 = ({ })} 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} - /> - navigate(warehouseListPath)} - onClose={closeModal} - open={action === "leave-screen"} - confirmButtonState="default" + submitNextAction={submitNextAction} + setSubmitNextAction={setSubmitNextAction} /> ); diff --git a/src/storybook/stories/products/ProductCreatePage.tsx b/src/storybook/stories/products/ProductCreatePage.tsx index ef80d8076..babd8504a 100644 --- a/src/storybook/stories/products/ProductCreatePage.tsx +++ b/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} /> )); diff --git a/src/storybook/stories/products/ProductUpdatePage.tsx b/src/storybook/stories/products/ProductUpdatePage.tsx index 980d68a84..c44841a1b 100644 --- a/src/storybook/stories/products/ProductUpdatePage.tsx +++ b/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", diff --git a/src/storybook/stories/products/ProductVariantCreatePage.tsx b/src/storybook/stories/products/ProductVariantCreatePage.tsx index d0fdbea77..d8578724d 100644 --- a/src/storybook/stories/products/ProductVariantCreatePage.tsx +++ b/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} /> )); diff --git a/src/storybook/stories/products/ProductVariantPage.tsx b/src/storybook/stories/products/ProductVariantPage.tsx index a70095d78..038c03372 100644 --- a/src/storybook/stories/products/ProductVariantPage.tsx +++ b/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} /> ));