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

Remove leave screen dialog

Browse source
This commit is contained in:
Dawid Tarasiuk 2020-09-29 11:54:26 +02:00
parent 4b01781157
commit bf18651f7d
17 changed files with 103 additions and 382 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
locale/defaultMessages.json
View file

@ -1593,14 +1593,6 @@
"context": "button",
"string": "{languageName} - {languageCode}"
},
"src_dot_components_dot_LeaveScreenDialog_dot_1295493095": {
"context": "leaving screen warning header",
"string": "You're leaving this screen"
},
"src_dot_components_dot_LeaveScreenDialog_dot_4066894204": {
"context": "leaving screen warning message",
"string": "Do you want to save previously made changes?"
},
"src_dot_components_dot_ListField_dot_3099331554": {
"context": "button",
"string": "Add"

17
src/components/Form/Form.tsx
View file

@ -1,14 +1,12 @@
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, nextAction: () => void) => void;
onSubmit?: (data: T) => void;
}
function Form<T>(props: FormProps<T>) {
@ -34,18 +32,7 @@ function Form<T>(props: FormProps<T>) {
submit();
}
return (
<form onSubmit={handleSubmit}>
{children(renderProps)}
<LeaveScreenDialog
onSaveChanges={renderProps.submit}
onRejectChanges={renderProps.leaveAction.current}
onClose={() => renderProps.askToLeave(null)}
open={!!renderProps.leaveModal}
confirmButtonState="default"
/>
</form>
);
return <form onSubmit={handleSubmit}>{children(renderProps)}</form>;
}
Form.displayName = "Form";

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

@ -1,56 +0,0 @@
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 { commonMessages } from "@saleor/intl";
import React from "react";
import { FormattedMessage } from "react-intl";
import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton";
export interface LeaveScreenDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
open: boolean;
onClose: () => void;
onSaveChanges: () => void;
onRejectChanges: () => void;
}
const LeaveScreenDialog: React.FC<LeaveScreenDialogProps> = ({
confirmButtonState,
onClose,
onSaveChanges,
onRejectChanges,
open
}) => (
<Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
<DialogTitle>
<FormattedMessage
defaultMessage="You're leaving this screen"
description="leaving screen warning header"
/>
</DialogTitle>
<DialogContent>
<FormattedMessage
defaultMessage="Do you want to save previously made changes?"
description="leaving screen warning message"
/>
</DialogContent>
<DialogActions>
<Button onClick={onRejectChanges}>
<FormattedMessage {...commonMessages.no} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
color="primary"
variant="contained"
onClick={onSaveChanges}
>
<FormattedMessage {...commonMessages.yes} />
</ConfirmButton>
</DialogActions>
</Dialog>
);
LeaveScreenDialog.displayName = "LeaveScreenDialog";
export default LeaveScreenDialog;

2
src/components/LeaveScreenDialog/index.ts
View file

@ -1,2 +0,0 @@
export { default } from "./LeaveScreenDialog";
export * from "./LeaveScreenDialog";

20
src/hooks/useForm.ts
View file

@ -1,6 +1,6 @@
import { toggle } from "@saleor/utils/lists";
import isEqual from "lodash-es/isEqual";
import { MutableRefObject, useRef, useState } from "react";
import { useState } from "react";
import useStateFromProps from "./useStateFromProps";
@ -14,9 +14,6 @@ export interface ChangeEvent<TData = any> {
export type FormChange = (event: ChangeEvent, cb?: () => void) => void;
export interface UseFormResult<T> {
askToLeave: (action: () => void | null) => void;
leaveAction: MutableRefObject<() => void | null>;
leaveModal: boolean;
change: FormChange;
data: T;
hasChanged: boolean;
@ -54,15 +51,13 @@ function handleRefresh<T extends FormData>(
function useForm<T extends FormData>(
initial: T,
onSubmit: (data: T, nextAction: () => void) => void
onSubmit: (data: T) => 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 = useRef<() => void>(null);
function toggleValue(event: ChangeEvent, cb?: () => void) {
const { name, value } = event.target;
@ -112,26 +107,17 @@ function useForm<T extends FormData>(
}
function submit() {
onSubmit(data, leaveAction.current);
setLeaveModal(false);
return onSubmit(data);
}
function triggerChange() {
setChanged(true);
}
function askToLeave(action: () => void | null) {
setLeaveModal(() => !!action);
leaveAction.current = action;
}
return {
askToLeave,
change,
data,
hasChanged,
leaveAction,
leaveModal,
reset,
set,
submit,

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

@ -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, { MetadataFormData } from "@saleor/components/Metadata";
import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
import PageHeader from "@saleor/components/PageHeader";
@ -79,8 +78,6 @@ export interface ProductCreatePageSubmitData extends FormData {
stocks: ProductStockInput[];
}
export type ProductCreatePageSubmitNextAction = "warehouse-configure";
interface ProductCreatePageProps {
errors: ProductErrorFragment[];
collections: SearchCollections_search_edges_node[];
@ -101,16 +98,12 @@ 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,
nextAction?: ProductCreatePageSubmitNextAction
);
onSubmitSkip?(nextAction?: ProductCreatePageSubmitNextAction);
onSubmit?(data: ProductCreatePageSubmitData);
}
export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
@ -133,7 +126,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
fetchProductTypes,
weightUnit,
onSubmit,
onSubmitSkip
onWarehouseConfigure
}: ProductCreatePageProps) => {
const intl = useIntl();
const localizeDate = useDateLocalize();
@ -210,21 +203,12 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
value: taxType.taxCode
})) || [];
const [modalWithAction, setModalWithAction] = React.useState<
ProductCreatePageSubmitNextAction
>(null);
const handleSubmit = (data: FormData) => {
onSubmit(
{
...data,
attributes,
stocks
},
modalWithAction
);
setModalWithAction(null);
};
const handleSubmit = (data: FormData) =>
onSubmit({
...data,
attributes,
stocks
});
return (
<Form onSubmit={handleSubmit} initial={initialData} confirmLeave>
@ -339,13 +323,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
triggerChange();
removeStock(id);
}}
onWarehouseConfigure={() => {
if (disabled || !onSubmit || !hasChanged) {
onSubmitSkip("warehouse-configure");
} else {
setModalWithAction("warehouse-configure");
}
}}
onWarehouseConfigure={onWarehouseConfigure}
/>
<CardSpacer />
</>
@ -434,17 +412,6 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
state={saveButtonBarState}
disabled={disabled || !onSubmit || !hasChanged}
/>
<LeaveScreenDialog
onSaveChanges={() => {
submit();
}}
onRejectChanges={() => {
onSubmitSkip("warehouse-configure");
}}
onClose={() => setModalWithAction(null)}
open={modalWithAction === "warehouse-configure"}
confirmButtonState={saveButtonBarState}
/>
</Container>
);
}}

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

@ -84,7 +84,7 @@ export interface ProductUpdatePageProps extends ListActions {
onImageReorder?(event: { oldIndex: number; newIndex: number });
onImageUpload(file: File);
onSeoClick?();
onSubmit?(data: ProductUpdatePageSubmitData, nextAction?: () => void);
onSubmit?(data: ProductUpdatePageSubmitData);
onVariantAdd?();
onSetDefaultVariant();
onWarehouseConfigure();
@ -193,28 +193,22 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
value: taxType.taxCode
})) || [];
const handleSubmit = (
data: ProductUpdatePageFormData,
nextAction: () => void
) => {
const handleSubmit = (data: ProductUpdatePageFormData) => {
const metadata = isMetadataModified ? data.metadata : undefined;
const privateMetadata = isPrivateMetadataModified
? data.privateMetadata
: undefined;
if (product.productType.hasVariants) {
onSubmit(
{
...data,
addStocks: [],
attributes,
metadata,
privateMetadata,
removeStocks: [],
updateStocks: []
},
nextAction
);
onSubmit({
...data,
addStocks: [],
attributes,
metadata,
privateMetadata,
removeStocks: [],
updateStocks: []
});
} else {
const dataStocks = stocks.map(stock => stock.id);
const variantStocks = product.variants[0]?.stocks.map(
@ -222,37 +216,25 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
);
const stockDiff = diff(variantStocks, dataStocks);
onSubmit(
{
...data,
addStocks: stocks.filter(stock =>
stockDiff.added.some(addedStock => addedStock === stock.id)
),
attributes,
metadata,
privateMetadata,
removeStocks: stockDiff.removed,
updateStocks: stocks.filter(
stock =>
!stockDiff.added.some(addedStock => addedStock === stock.id)
)
},
nextAction
);
onSubmit({
...data,
addStocks: stocks.filter(stock =>
stockDiff.added.some(addedStock => addedStock === stock.id)
),
attributes,
metadata,
privateMetadata,
removeStocks: stockDiff.removed,
updateStocks: stocks.filter(
stock => !stockDiff.added.some(addedStock => addedStock === stock.id)
)
});
}
};
return (
<Form onSubmit={handleSubmit} initial={initialData} confirmLeave>
{({
change,
data,
hasChanged,
submit,
triggerChange,
toggleValue,
askToLeave
}) => {
{({ change, data, hasChanged, submit, triggerChange, toggleValue }) => {
const handleCollectionSelect = createMultiAutocompleteSelectHandler(
toggleValue,
setSelectedCollections,
@ -390,13 +372,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
triggerChange();
removeStock(id);
}}
onWarehouseConfigure={() => {
if (disabled || !onSubmit || !hasChanged) {
onWarehouseConfigure();
} else {
askToLeave(onWarehouseConfigure);
}
}}
onWarehouseConfigure={onWarehouseConfigure}
/>
</>
)}

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

@ -4,7 +4,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, { MetadataFormData } from "@saleor/components/Metadata";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
@ -46,8 +45,6 @@ export interface ProductVariantCreatePageSubmitData
stocks: ProductStockInput[];
}
export type ProductVariantCreatePageSubmitNextAction = "warehouse-configure";
interface ProductVariantCreatePageProps {
currencySymbol: string;
disabled: boolean;
@ -58,15 +55,10 @@ interface ProductVariantCreatePageProps {
warehouses: SearchWarehouses_search_edges_node[];
weightUnit: string;
onBack: () => void;
onSubmit: (
data: ProductVariantCreatePageSubmitData,
nextAction?: ProductVariantCreatePageSubmitNextAction
) => void;
onSubmitSkip?: (
nextAction?: ProductVariantCreatePageSubmitNextAction
) => void;
onSubmit: (data: ProductVariantCreatePageSubmitData) => void;
onVariantClick: (variantId: string) => void;
onVariantReorder: ReorderAction;
onWarehouseConfigure: () => void;
}
const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
@ -80,9 +72,9 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
weightUnit,
onBack,
onSubmit,
onSubmitSkip,
onVariantClick,
onVariantReorder
onVariantReorder,
onWarehouseConfigure
}) => {
const intl = useIntl();
const attributeInput = React.useMemo(
@ -114,21 +106,12 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
weight: ""
};
const [modalWithAction, setModalWithAction] = React.useState<
ProductVariantCreatePageSubmitNextAction
>(null);
const handleSubmit = (data: ProductVariantCreatePageFormData) => {
onSubmit(
{
...data,
attributes,
stocks
},
modalWithAction
);
setModalWithAction(null);
};
const handleSubmit = (data: ProductVariantCreatePageFormData) =>
onSubmit({
...data,
attributes,
stocks
});
return (
<Form initial={initialForm} onSubmit={handleSubmit}>
@ -207,13 +190,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
triggerChange();
removeStock(id);
}}
onWarehouseConfigure={() => {
if (disabled || !onSubmit || !hasChanged) {
onSubmitSkip("warehouse-configure");
} else {
setModalWithAction("warehouse-configure");
}
}}
onWarehouseConfigure={onWarehouseConfigure}
/>
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
@ -235,17 +212,6 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
onCancel={onBack}
onSave={submit}
/>
<LeaveScreenDialog
onSaveChanges={() => {
submit();
}}
onRejectChanges={() => {
onSubmitSkip("warehouse-configure");
}}
onClose={() => setModalWithAction(null)}
open={modalWithAction === "warehouse-configure"}
confirmButtonState={saveButtonBarState}
/>
</Container>
);
}}

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

@ -4,7 +4,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 { MetadataFormData } from "@saleor/components/Metadata";
import Metadata from "@saleor/components/Metadata/Metadata";
import PageHeader from "@saleor/components/PageHeader";
@ -54,8 +53,6 @@ export interface ProductVariantPageSubmitData
removeStocks: string[];
}
export type ProductVariantPageSubmitNextAction = "warehouse-configure";
interface ProductVariantPageProps {
defaultWeightUnit: string;
variant?: ProductVariant;
@ -69,14 +66,11 @@ interface ProductVariantPageProps {
onAdd();
onBack();
onDelete();
onSubmit(
data: ProductVariantPageSubmitData,
nextAction?: ProductVariantPageSubmitNextAction
);
onSubmitSkip?(nextAction?: ProductVariantPageSubmitNextAction);
onSubmit(data: ProductVariantPageSubmitData);
onImageSelect(id: string);
onVariantClick(variantId: string);
onSetDefaultVariant();
onWarehouseConfigure();
}
const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
@ -93,10 +87,10 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
onDelete,
onImageSelect,
onSubmit,
onSubmitSkip,
onVariantClick,
onVariantReorder,
onSetDefaultVariant
onSetDefaultVariant,
onWarehouseConfigure
}) => {
const attributeInput = React.useMemo(
() => getAttributeInputFromVariant(variant),
@ -146,10 +140,6 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
weight: variant?.weight?.value.toString() || ""
};
const [modalWithAction, setModalWithAction] = React.useState<
ProductVariantPageSubmitNextAction
>(null);
const handleSubmit = (data: ProductVariantPageFormData) => {
const dataStocks = stocks.map(stock => stock.id);
const variantStocks = variant.stocks.map(stock => stock.warehouse.id);
@ -159,23 +149,19 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
? data.privateMetadata
: undefined;
onSubmit(
{
...data,
addStocks: stocks.filter(stock =>
stockDiff.added.some(addedStock => addedStock === stock.id)
),
attributes,
metadata,
privateMetadata,
removeStocks: stockDiff.removed,
updateStocks: stocks.filter(
stock => !stockDiff.added.some(addedStock => addedStock === stock.id)
)
},
modalWithAction
);
setModalWithAction(null);
onSubmit({
...data,
addStocks: stocks.filter(stock =>
stockDiff.added.some(addedStock => addedStock === stock.id)
),
attributes,
metadata,
privateMetadata,
removeStocks: stockDiff.removed,
updateStocks: stocks.filter(
stock => !stockDiff.added.some(addedStock => addedStock === stock.id)
)
});
};
return (
@ -280,13 +266,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
triggerChange();
removeStock(id);
}}
onWarehouseConfigure={() => {
if (!onSubmit || !hasChanged) {
onSubmitSkip("warehouse-configure");
} else {
setModalWithAction("warehouse-configure");
}
}}
onWarehouseConfigure={onWarehouseConfigure}
/>
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
@ -299,17 +279,6 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
onDelete={onDelete}
onSave={submit}
/>
<LeaveScreenDialog
onSaveChanges={() => {
submit();
}}
onRejectChanges={() => {
onSubmitSkip("warehouse-configure");
}}
onClose={() => setModalWithAction(null)}
open={modalWithAction === "warehouse-configure"}
confirmButtonState={saveButtonBarState}
/>
</>
);
}}

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

@ -20,8 +20,7 @@ import { useIntl } from "react-intl";
import { decimal, weight } from "../../misc";
import ProductCreatePage, {
ProductCreatePageSubmitData,
ProductCreatePageSubmitNextAction
ProductCreatePageSubmitData
} from "../components/ProductCreatePage";
import {
useProductCreateMutation,
@ -73,7 +72,7 @@ export const ProductCreateView: React.FC = () => {
] = useProductSetAvailabilityForPurchase({
onCompleted: data => {
const errors = data?.productSetAvailabilityForPurchase?.errors;
if (errors?.length === 0 && !submitNextAction) {
if (errors?.length === 0) {
navigate(productUrl(data.productSetAvailabilityForPurchase.product.id));
}
}
@ -92,12 +91,7 @@ export const ProductCreateView: React.FC = () => {
}
});
const handleCreate = async (
formData: ProductCreatePageSubmitData,
nextAction?: ProductCreatePageSubmitNextAction
) => {
setSubmitNextAction(nextAction);
const handleCreate = async (formData: ProductCreatePageSubmitData) => {
const result = await productCreate({
variables: {
input: {
@ -157,18 +151,6 @@ 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 (
<>
<WindowTitle
@ -198,15 +180,8 @@ export const ProductCreateView: React.FC = () => {
edge => edge.node
)}
onBack={handleBack}
onSubmit={async (data, nextAction) => {
const errors = await handleSubmit(data, nextAction);
if (errors?.length === 0) {
handleSubmitNextAction(nextAction);
} else {
setSubmitNextAction(null);
}
}}
onSubmitSkip={handleSubmitNextAction}
onSubmit={handleSubmit}
onWarehouseConfigure={() => navigate(warehouseListPath)}
saveButtonBarState={productCreateOpts.status}
fetchMoreCategories={{
hasMore: searchCategoryOpts.data?.search.pageInfo.hasNextPage,

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

@ -304,12 +304,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
onBack={handleBack}
onDelete={() => openModal("remove")}
onImageReorder={handleImageReorder}
onSubmit={async (data, nextAction) => {
const errors = await handleSubmit(data);
if (errors?.length === 0 && nextAction) {
nextAction();
}
}}
onSubmit={handleSubmit}
onWarehouseConfigure={() => navigate(warehouseListPath)}
onVariantAdd={handleVariantAdd}
onVariantsAdd={() => navigate(productVariantCreatorUrl(id))}

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

@ -20,8 +20,7 @@ import { useIntl } from "react-intl";
import { decimal, weight } from "../../misc";
import ProductVariantDeleteDialog from "../components/ProductVariantDeleteDialog";
import ProductVariantPage, {
ProductVariantPageSubmitData,
ProductVariantPageSubmitNextAction
ProductVariantPageSubmitData
} from "../components/ProductVariantPage";
import {
useProductVariantReorderMutation,
@ -198,14 +197,6 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
variables => updatePrivateMetadata({ variables })
);
const handleSubmitNextAction = (
nextAction?: ProductVariantPageSubmitNextAction
) => {
if (nextAction === "warehouse-configure") {
navigate(warehouseListPath);
}
};
return (
<>
<WindowTitle title={data?.productVariant?.name} />
@ -225,13 +216,8 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
onBack={handleBack}
onDelete={() => openModal("remove")}
onImageSelect={handleImageSelect}
onSubmit={async (data, nextAction) => {
const errors = await handleSubmit(data);
if (errors?.length === 0) {
handleSubmitNextAction(nextAction);
}
}}
onSubmitSkip={handleSubmitNextAction}
onSubmit={handleSubmit}
onWarehouseConfigure={() => navigate(warehouseListPath)}
onVariantClick={variantId => {
navigate(productVariantEditUrl(productId, variantId));
}}

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

@ -16,8 +16,7 @@ import { useIntl } from "react-intl";
import { decimal, weight } from "../../misc";
import ProductVariantCreatePage, {
ProductVariantCreatePageSubmitData,
ProductVariantCreatePageSubmitNextAction
ProductVariantCreatePageSubmitData
} from "../components/ProductVariantCreatePage";
import {
useProductVariantReorderMutation,
@ -57,14 +56,12 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
if (!submitNextAction) {
navigate(
productVariantEditUrl(
productId,
data.productVariantCreate.productVariant.id
)
);
}
navigate(
productVariantEditUrl(
productId,
data.productVariantCreate.productVariant.id
)
);
}
}
});
@ -87,12 +84,7 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
);
const handleBack = () => navigate(productUrl(productId));
const handleCreate = async (
formData: ProductVariantCreatePageSubmitData,
nextAction?: ProductVariantCreatePageSubmitNextAction
) => {
setSubmitNextAction(nextAction);
const handleCreate = async (formData: ProductVariantCreatePageSubmitData) => {
const result = await variantCreate({
variables: {
input: {
@ -126,18 +118,6 @@ 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 ||
@ -161,16 +141,9 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
})}
product={data?.product}
onBack={handleBack}
onSubmit={async (data, nextAction) => {
const errors = await handleSubmit(data, nextAction);
if (errors?.length === 0) {
handleSubmitNextAction(nextAction);
} else {
setSubmitNextAction(null);
}
}}
onSubmitSkip={handleSubmitNextAction}
onSubmit={handleSubmit}
onVariantClick={handleVariantClick}
onWarehouseConfigure={() => navigate(warehouseListPath)}
onVariantReorder={handleVariantReorder}
saveButtonBarState={variantCreateResult.status}
warehouses={

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

@ -35,6 +35,7 @@ storiesOf("Views / Products / Create product", module)
onSubmit={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
taxTypes={taxTypes}
weightUnit="kg"
/>
@ -58,6 +59,7 @@ storiesOf("Views / Products / Create product", module)
onSubmit={() => undefined}
saveButtonBarState="default"
warehouses={undefined}
onWarehouseConfigure={() => undefined}
taxTypes={taxTypes}
weightUnit="kg"
/>
@ -87,6 +89,7 @@ storiesOf("Views / Products / Create product", module)
onSubmit={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
taxTypes={taxTypes}
weightUnit="kg"
/>

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

@ -26,6 +26,7 @@ storiesOf("Views / Products / Create product variant", module)
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
))
.add("with errors", () => (
@ -58,6 +59,7 @@ storiesOf("Views / Products / Create product variant", module)
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
))
.add("when loading data", () => (
@ -74,6 +76,7 @@ storiesOf("Views / Products / Create product variant", module)
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
))
.add("add first variant", () => (
@ -93,5 +96,6 @@ 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,6 +28,7 @@ storiesOf("Views / Products / Product variant details", module)
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
))
.add("when loading data", () => (
@ -47,6 +48,7 @@ storiesOf("Views / Products / Product variant details", module)
onVariantReorder={() => undefined}
saveButtonBarState="default"
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
))
.add("attribute errors", () => (
@ -82,5 +84,6 @@ storiesOf("Views / Products / Product variant details", module)
...error
}))}
warehouses={warehouseList}
onWarehouseConfigure={() => undefined}
/>
));

11
src/utils/handlers/metadataCreateHandler.ts
View file

@ -10,19 +10,16 @@ import {
UpdatePrivateMetadataVariables
} from "../metadata/types/UpdatePrivateMetadata";
function createMetadataCreateHandler<
T extends MetadataFormData,
N extends string
>(
create: (data: T, nextAction?: N) => Promise<string>,
function createMetadataCreateHandler<T extends MetadataFormData>(
create: (data: T) => Promise<string>,
setMetadata: MutationFunction<UpdateMetadata, UpdateMetadataVariables>,
setPrivateMetadata: MutationFunction<
UpdatePrivateMetadata,
UpdatePrivateMetadataVariables
>
) {
return async (data: T, nextAction?: N) => {
const id = await create(data, nextAction);
return async (data: T) => {
const id = await create(data);
if (id === null) {
return null;