djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add redirect on warehouse configuration action

Browse source
This commit is contained in:
Dawid Tarasiuk 2020-09-21 18:29:50 +02:00
parent 6065c5ded6
commit 1aaa5c5c3a
14 changed files with 257 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/LeaveScreenDialog/LeaveScreenDialog.tsx
View file

@ -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}>
{({ submit }) => (
<>
<DialogTitle>
<FormattedMessage
defaultMessage="You're leaving this screen"
description="leaving screen warning header"
/>
</DialogTitle>
<DialogContent>
<FormattedMessage
defaultMessage="You're leaving this screen. Do you want to save previously made changes?"
defaultMessage="Do you want to save previously made changes?"
description="leaving screen warning message"
/>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.cancel} />
<Button onClick={onRejectChanges}>
<FormattedMessage {...buttonMessages.no} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
color="primary"
variant="contained"
onClick={submit}
onClick={onSaveChanges}
>
<FormattedMessage {...buttonMessages.save} />
<FormattedMessage {...buttonMessages.yes} />
</ConfirmButton>
</DialogActions>
</>
)}
</Form>
</Dialog>
);
LeaveScreenDialog.displayName = "LeaveScreenDialog";

8
src/intl.ts
View file

@ -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"
}
});

31
src/products/components/ProductCreatePage/ProductCreatePage.tsx
View file

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

30
src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
View file

@ -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>
</>
);

33
src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
View file

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

29
src/products/components/ProductVariantPage/ProductVariantPage.tsx
View file

@ -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}
/>
</>
);
}}

55
src/products/views/ProductCreate.tsx
View file

@ -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<ProductCreateViewProps> = ({
params
}) => {
const { action } = params;
export const ProductCreateView: React.FC<ProductCreateViewProps> = ({}) => {
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"
/>
</>
);
};

37
src/products/views/ProductUpdate/ProductUpdate.tsx
View file

@ -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"
/>
</>
);
};

31
src/products/views/ProductVariant.tsx
View file

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

49
src/products/views/ProductVariantCreate.tsx
View file

@ -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,
params
productId
}) => {
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}
/>
<LeaveScreenDialog
onSubmit={() => navigate(warehouseListPath)}
onClose={closeModal}
open={action === "leave-screen"}
confirmButtonState="default"
submitNextAction={submitNextAction}
setSubmitNextAction={setSubmitNextAction}
/>
</>
);

3
src/storybook/stories/products/ProductCreatePage.tsx
View file

@ -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}
/>
));

1
src/storybook/stories/products/ProductUpdatePage.tsx
View file

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

4
src/storybook/stories/products/ProductVariantCreatePage.tsx
View file

@ -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}
/>
));

3
src/storybook/stories/products/ProductVariantPage.tsx
View file

@ -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}
/>
));