Update submit next action logic

This commit is contained in:
Dawid Tarasiuk 2020-09-22 12:32:17 +02:00
parent 1aaa5c5c3a
commit e8e1162698
9 changed files with 168 additions and 125 deletions

View file

@ -106,9 +106,11 @@ interface ProductCreatePageProps {
fetchCollections: (data: string) => void; fetchCollections: (data: string) => void;
fetchProductTypes: (data: string) => void; fetchProductTypes: (data: string) => void;
onBack?(); onBack?();
onSubmit?(data: ProductCreatePageSubmitData); onSubmit?(
onSubmitReject?(nextAction?: ProductCreatePageSubmitNextAction); data: ProductCreatePageSubmitData,
setSubmitNextAction?(nextAction: ProductCreatePageSubmitNextAction); nextAction?: ProductCreatePageSubmitNextAction
);
onSubmitSkip?(nextAction?: ProductCreatePageSubmitNextAction);
} }
export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
@ -131,9 +133,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
fetchProductTypes, fetchProductTypes,
weightUnit, weightUnit,
onSubmit, onSubmit,
onSubmitReject, onSubmitSkip
submitNextAction,
setSubmitNextAction
}: ProductCreatePageProps) => { }: ProductCreatePageProps) => {
const intl = useIntl(); const intl = useIntl();
const localizeDate = useDateLocalize(); const localizeDate = useDateLocalize();
@ -210,12 +210,21 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
value: taxType.taxCode value: taxType.taxCode
})) || []; })) || [];
const handleSubmit = (data: FormData) => const [modalWithAction, setModalWithAction] = React.useState<
onSubmit({ ProductCreatePageSubmitNextAction
...data, >(null);
attributes,
stocks const handleSubmit = (data: FormData) => {
}); onSubmit(
{
...data,
attributes,
stocks
},
modalWithAction
);
setModalWithAction(null);
};
return ( return (
<Form onSubmit={handleSubmit} initial={initialData} confirmLeave> <Form onSubmit={handleSubmit} initial={initialData} confirmLeave>
@ -331,9 +340,10 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
removeStock(id); removeStock(id);
}} }}
onWarehouseConfigure={() => { onWarehouseConfigure={() => {
setSubmitNextAction("warehouse-configure");
if (disabled || !onSubmit || !hasChanged) { if (disabled || !onSubmit || !hasChanged) {
onSubmitReject("warehouse-configure"); onSubmitSkip("warehouse-configure");
} else {
setModalWithAction("warehouse-configure");
} }
}} }}
/> />
@ -429,10 +439,10 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
submit(); submit();
}} }}
onRejectChanges={() => { onRejectChanges={() => {
onSubmitReject("warehouse-configure"); onSubmitSkip("warehouse-configure");
}} }}
onClose={() => setSubmitNextAction(null)} onClose={() => setModalWithAction(null)}
open={submitNextAction === "warehouse-configure"} open={modalWithAction === "warehouse-configure"}
confirmButtonState={saveButtonBarState} confirmButtonState={saveButtonBarState}
/> />
</Container> </Container>

View file

@ -88,9 +88,11 @@ export interface ProductUpdatePageProps extends ListActions {
onImageReorder?(event: { oldIndex: number; newIndex: number }); onImageReorder?(event: { oldIndex: number; newIndex: number });
onImageUpload(file: File); onImageUpload(file: File);
onSeoClick?(); onSeoClick?();
onSubmit?(data: ProductUpdatePageSubmitData); onSubmit?(
onSubmitReject?(nextAction?: ProductUpdatePageSubmitNextAction); data: ProductUpdatePageSubmitData,
setSubmitNextAction?(nextAction: ProductUpdatePageSubmitNextAction); nextAction?: ProductUpdatePageSubmitNextAction
);
onSubmitSkip?(nextAction?: ProductUpdatePageSubmitNextAction);
onVariantAdd?(); onVariantAdd?();
onSetDefaultVariant(); onSetDefaultVariant();
onWarehouseConfigure(); onWarehouseConfigure();
@ -130,7 +132,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
onImageUpload, onImageUpload,
onSeoClick, onSeoClick,
onSubmit, onSubmit,
onSubmitReject, onSubmitSkip,
onVariantAdd, onVariantAdd,
onVariantsAdd, onVariantsAdd,
onSetDefaultVariant, onSetDefaultVariant,
@ -140,9 +142,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
selected, selected,
toggle, toggle,
toggleAll, toggleAll,
toolbar, toolbar
submitNextAction,
setSubmitNextAction
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const localizeDate = useDateLocalize(); const localizeDate = useDateLocalize();
@ -201,6 +201,10 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
value: taxType.taxCode value: taxType.taxCode
})) || []; })) || [];
const [modalWithAction, setModalWithAction] = React.useState<
ProductUpdatePageSubmitNextAction
>(null);
const handleSubmit = (data: ProductUpdatePageFormData) => { const handleSubmit = (data: ProductUpdatePageFormData) => {
const metadata = isMetadataModified ? data.metadata : undefined; const metadata = isMetadataModified ? data.metadata : undefined;
const privateMetadata = isPrivateMetadataModified const privateMetadata = isPrivateMetadataModified
@ -208,15 +212,18 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
: undefined; : undefined;
if (product.productType.hasVariants) { if (product.productType.hasVariants) {
onSubmit({ onSubmit(
...data, {
addStocks: [], ...data,
attributes, addStocks: [],
metadata, attributes,
privateMetadata, metadata,
removeStocks: [], privateMetadata,
updateStocks: [] removeStocks: [],
}); updateStocks: []
},
modalWithAction
);
} else { } else {
const dataStocks = stocks.map(stock => stock.id); const dataStocks = stocks.map(stock => stock.id);
const variantStocks = product.variants[0]?.stocks.map( const variantStocks = product.variants[0]?.stocks.map(
@ -224,20 +231,25 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
); );
const stockDiff = diff(variantStocks, dataStocks); const stockDiff = diff(variantStocks, dataStocks);
onSubmit({ onSubmit(
...data, {
addStocks: stocks.filter(stock => ...data,
stockDiff.added.some(addedStock => addedStock === stock.id) addStocks: stocks.filter(stock =>
), stockDiff.added.some(addedStock => addedStock === stock.id)
attributes, ),
metadata, attributes,
privateMetadata, metadata,
removeStocks: stockDiff.removed, privateMetadata,
updateStocks: stocks.filter( removeStocks: stockDiff.removed,
stock => !stockDiff.added.some(addedStock => addedStock === stock.id) updateStocks: stocks.filter(
) stock =>
}); !stockDiff.added.some(addedStock => addedStock === stock.id)
)
},
modalWithAction
);
} }
setModalWithAction(null);
}; };
return ( return (
@ -381,9 +393,10 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
removeStock(id); removeStock(id);
}} }}
onWarehouseConfigure={() => { onWarehouseConfigure={() => {
setSubmitNextAction("warehouse-configure");
if (disabled || !onSubmit || !hasChanged) { if (disabled || !onSubmit || !hasChanged) {
onSubmitReject("warehouse-configure"); onSubmitSkip("warehouse-configure");
} else {
setModalWithAction("warehouse-configure");
} }
}} }}
/> />
@ -480,10 +493,10 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
submit(); submit();
}} }}
onRejectChanges={() => { onRejectChanges={() => {
onSubmitReject("warehouse-configure"); onSubmitSkip("warehouse-configure");
}} }}
onClose={() => setSubmitNextAction(null)} onClose={() => setModalWithAction(null)}
open={submitNextAction === "warehouse-configure"} open={modalWithAction === "warehouse-configure"}
confirmButtonState={saveButtonBarState} confirmButtonState={saveButtonBarState}
/> />
</Container> </Container>

View file

@ -57,14 +57,13 @@ interface ProductVariantCreatePageProps {
saveButtonBarState: ConfirmButtonTransitionState; saveButtonBarState: ConfirmButtonTransitionState;
warehouses: SearchWarehouses_search_edges_node[]; warehouses: SearchWarehouses_search_edges_node[];
weightUnit: string; weightUnit: string;
submitNextAction?: ProductVariantCreatePageSubmitNextAction;
onBack: () => void; onBack: () => void;
onSubmit: (data: ProductVariantCreatePageSubmitData) => void; onSubmit: (
onSubmitReject?: ( data: ProductVariantCreatePageSubmitData,
nextAction?: ProductVariantCreatePageSubmitNextAction nextAction?: ProductVariantCreatePageSubmitNextAction
) => void; ) => void;
setSubmitNextAction?: ( onSubmitSkip?: (
nextAction: ProductVariantCreatePageSubmitNextAction nextAction?: ProductVariantCreatePageSubmitNextAction
) => void; ) => void;
onVariantClick: (variantId: string) => void; onVariantClick: (variantId: string) => void;
onVariantReorder: ReorderAction; onVariantReorder: ReorderAction;
@ -81,11 +80,9 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
weightUnit, weightUnit,
onBack, onBack,
onSubmit, onSubmit,
onSubmitReject, onSubmitSkip,
onVariantClick, onVariantClick,
onVariantReorder, onVariantReorder
submitNextAction,
setSubmitNextAction
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const attributeInput = React.useMemo( const attributeInput = React.useMemo(
@ -117,12 +114,21 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
weight: "" weight: ""
}; };
const handleSubmit = (data: ProductVariantCreatePageFormData) => const [modalWithAction, setModalWithAction] = React.useState<
onSubmit({ ProductVariantCreatePageSubmitNextAction
...data, >(null);
attributes,
stocks const handleSubmit = (data: ProductVariantCreatePageFormData) => {
}); onSubmit(
{
...data,
attributes,
stocks
},
modalWithAction
);
setModalWithAction(null);
};
return ( return (
<Form initial={initialForm} onSubmit={handleSubmit}> <Form initial={initialForm} onSubmit={handleSubmit}>
@ -202,9 +208,10 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
removeStock(id); removeStock(id);
}} }}
onWarehouseConfigure={() => { onWarehouseConfigure={() => {
setSubmitNextAction("warehouse-configure");
if (disabled || !onSubmit || !hasChanged) { if (disabled || !onSubmit || !hasChanged) {
onSubmitReject("warehouse-configure"); onSubmitSkip("warehouse-configure");
} else {
setModalWithAction("warehouse-configure");
} }
}} }}
/> />
@ -233,10 +240,10 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
submit(); submit();
}} }}
onRejectChanges={() => { onRejectChanges={() => {
onSubmitReject("warehouse-configure"); onSubmitSkip("warehouse-configure");
}} }}
onClose={() => setSubmitNextAction(null)} onClose={() => setModalWithAction(null)}
open={submitNextAction === "warehouse-configure"} open={modalWithAction === "warehouse-configure"}
confirmButtonState={saveButtonBarState} confirmButtonState={saveButtonBarState}
/> />
</Container> </Container>

View file

@ -65,14 +65,15 @@ interface ProductVariantPageProps {
placeholderImage?: string; placeholderImage?: string;
header: string; header: string;
warehouses: WarehouseFragment[]; warehouses: WarehouseFragment[];
submitNextAction?: ProductVariantPageSubmitNextAction;
onVariantReorder: ReorderAction; onVariantReorder: ReorderAction;
onAdd(); onAdd();
onBack(); onBack();
onDelete(); onDelete();
onSubmit(data: ProductVariantPageSubmitData); onSubmit(
onSubmitReject?(nextAction?: ProductVariantPageSubmitNextAction); data: ProductVariantPageSubmitData,
setSubmitNextAction?(nextAction: ProductVariantPageSubmitNextAction); nextAction?: ProductVariantPageSubmitNextAction
);
onSubmitSkip?(nextAction?: ProductVariantPageSubmitNextAction);
onImageSelect(id: string); onImageSelect(id: string);
onVariantClick(variantId: string); onVariantClick(variantId: string);
onSetDefaultVariant(); onSetDefaultVariant();
@ -93,13 +94,11 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
onDelete, onDelete,
onImageSelect, onImageSelect,
onSubmit, onSubmit,
onSubmitReject, onSubmitSkip,
onVariantClick, onVariantClick,
onVariantReorder, onVariantReorder,
onSetDefaultVariant, onSetDefaultVariant,
onWarehouseConfigure, onWarehouseConfigure
submitNextAction,
setSubmitNextAction
}) => { }) => {
const attributeInput = React.useMemo( const attributeInput = React.useMemo(
() => getAttributeInputFromVariant(variant), () => getAttributeInputFromVariant(variant),
@ -149,6 +148,10 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
weight: variant?.weight?.value.toString() || "" weight: variant?.weight?.value.toString() || ""
}; };
const [modalWithAction, setModalWithAction] = React.useState<
ProductVariantPageSubmitNextAction
>(null);
const handleSubmit = (data: ProductVariantPageFormData) => { const handleSubmit = (data: ProductVariantPageFormData) => {
const dataStocks = stocks.map(stock => stock.id); const dataStocks = stocks.map(stock => stock.id);
const variantStocks = variant.stocks.map(stock => stock.warehouse.id); const variantStocks = variant.stocks.map(stock => stock.warehouse.id);
@ -158,19 +161,23 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
? data.privateMetadata ? data.privateMetadata
: undefined; : undefined;
onSubmit({ onSubmit(
...data, {
addStocks: stocks.filter(stock => ...data,
stockDiff.added.some(addedStock => addedStock === stock.id) addStocks: stocks.filter(stock =>
), stockDiff.added.some(addedStock => addedStock === stock.id)
attributes, ),
metadata, attributes,
privateMetadata, metadata,
removeStocks: stockDiff.removed, privateMetadata,
updateStocks: stocks.filter( removeStocks: stockDiff.removed,
stock => !stockDiff.added.some(addedStock => addedStock === stock.id) updateStocks: stocks.filter(
) stock => !stockDiff.added.some(addedStock => addedStock === stock.id)
}); )
},
modalWithAction
);
setModalWithAction(null);
}; };
return ( return (
@ -276,9 +283,10 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
removeStock(id); removeStock(id);
}} }}
onWarehouseConfigure={() => { onWarehouseConfigure={() => {
setSubmitNextAction("warehouse-configure");
if (!onSubmit || !hasChanged) { if (!onSubmit || !hasChanged) {
onSubmitReject("warehouse-configure"); onSubmitSkip("warehouse-configure");
} else {
setModalWithAction("warehouse-configure");
} }
}} }}
/> />
@ -298,10 +306,10 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
submit(); submit();
}} }}
onRejectChanges={() => { onRejectChanges={() => {
onSubmitReject("warehouse-configure"); onSubmitSkip("warehouse-configure");
}} }}
onClose={() => setSubmitNextAction(null)} onClose={() => setModalWithAction(null)}
open={submitNextAction === "warehouse-configure"} open={modalWithAction === "warehouse-configure"}
confirmButtonState={saveButtonBarState} confirmButtonState={saveButtonBarState}
/> />
</> </>

View file

@ -97,7 +97,12 @@ export const ProductCreateView: React.FC<ProductCreateViewProps> = ({}) => {
} }
}); });
const handleCreate = async (formData: ProductCreatePageSubmitData) => { const handleCreate = async (
formData: ProductCreatePageSubmitData,
nextAction?: ProductCreatePageSubmitNextAction
) => {
setSubmitNextAction(nextAction);
const result = await productCreate({ const result = await productCreate({
variables: { variables: {
input: { input: {
@ -198,15 +203,15 @@ export const ProductCreateView: React.FC<ProductCreateViewProps> = ({}) => {
edge => edge.node edge => edge.node
)} )}
onBack={handleBack} onBack={handleBack}
onSubmit={async data => { onSubmit={async (data, nextAction) => {
const errors = await handleSubmit(data); const errors = await handleSubmit(data, nextAction);
if (errors?.length === 0) { if (errors?.length === 0) {
handleSubmitNextAction(); handleSubmitNextAction(nextAction);
} else { } else {
setSubmitNextAction(null); setSubmitNextAction(null);
} }
}} }}
onSubmitReject={handleSubmitNextAction} onSubmitSkip={handleSubmitNextAction}
saveButtonBarState={productCreateOpts.status} saveButtonBarState={productCreateOpts.status}
fetchMoreCategories={{ fetchMoreCategories={{
hasMore: searchCategoryOpts.data?.search.pageInfo.hasNextPage, hasMore: searchCategoryOpts.data?.search.pageInfo.hasNextPage,
@ -223,8 +228,6 @@ export const ProductCreateView: React.FC<ProductCreateViewProps> = ({}) => {
loading: searchProductTypesOpts.loading, loading: searchProductTypesOpts.loading,
onFetchMore: loadMoreProductTypes onFetchMore: loadMoreProductTypes
}} }}
submitNextAction={submitNextAction}
setSubmitNextAction={setSubmitNextAction}
warehouses={ warehouses={
warehouses.data?.warehouses.edges.map(edge => edge.node) || [] warehouses.data?.warehouses.edges.map(edge => edge.node) || []
} }

View file

@ -318,15 +318,15 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
onBack={handleBack} onBack={handleBack}
onDelete={() => openModal("remove")} onDelete={() => openModal("remove")}
onImageReorder={handleImageReorder} onImageReorder={handleImageReorder}
onSubmit={async data => { onSubmit={async (data, nextAction) => {
const errors = await handleSubmit(data); const errors = await handleSubmit(data);
if (errors?.length === 0) { if (errors?.length === 0) {
handleSubmitNextAction(); handleSubmitNextAction(nextAction);
} else { } else {
setSubmitNextAction(null); setSubmitNextAction(null);
} }
}} }}
onSubmitReject={handleSubmitNextAction} onSubmitSkip={handleSubmitNextAction}
onVariantAdd={handleVariantAdd} onVariantAdd={handleVariantAdd}
onVariantsAdd={() => navigate(productVariantCreatorUrl(id))} onVariantsAdd={() => navigate(productVariantCreatorUrl(id))}
onVariantShow={variantId => () => onVariantShow={variantId => () =>
@ -365,8 +365,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
loading: searchCollectionsOpts.loading, loading: searchCollectionsOpts.loading,
onFetchMore: loadMoreCollections onFetchMore: loadMoreCollections
}} }}
submitNextAction={submitNextAction}
setSubmitNextAction={setSubmitNextAction}
/> />
<ActionDialog <ActionDialog
open={params.action === "remove"} open={params.action === "remove"}

View file

@ -231,21 +231,19 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
onBack={handleBack} onBack={handleBack}
onDelete={() => openModal("remove")} onDelete={() => openModal("remove")}
onImageSelect={handleImageSelect} onImageSelect={handleImageSelect}
onSubmit={async data => { onSubmit={async (data, nextAction) => {
const errors = await handleSubmit(data); const errors = await handleSubmit(data);
if (errors?.length === 0) { if (errors?.length === 0) {
handleSubmitNextAction(); handleSubmitNextAction(nextAction);
} else { } else {
setSubmitNextAction(null); setSubmitNextAction(null);
} }
}} }}
onSubmitReject={handleSubmitNextAction} onSubmitSkip={handleSubmitNextAction}
onVariantClick={variantId => { onVariantClick={variantId => {
navigate(productVariantEditUrl(productId, variantId)); navigate(productVariantEditUrl(productId, variantId));
}} }}
onVariantReorder={handleVariantReorder} onVariantReorder={handleVariantReorder}
submitNextAction={submitNextAction}
setSubmitNextAction={setSubmitNextAction}
/> />
<ProductVariantDeleteDialog <ProductVariantDeleteDialog
confirmButtonState={deleteVariantOpts.status} confirmButtonState={deleteVariantOpts.status}

View file

@ -91,7 +91,12 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
); );
const handleBack = () => navigate(productUrl(productId)); const handleBack = () => navigate(productUrl(productId));
const handleCreate = async (formData: ProductVariantCreatePageSubmitData) => { const handleCreate = async (
formData: ProductVariantCreatePageSubmitData,
nextAction?: ProductVariantCreatePageSubmitNextAction
) => {
setSubmitNextAction(nextAction);
const result = await variantCreate({ const result = await variantCreate({
variables: { variables: {
input: { input: {
@ -160,15 +165,15 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
})} })}
product={data?.product} product={data?.product}
onBack={handleBack} onBack={handleBack}
onSubmit={async data => { onSubmit={async (data, nextAction) => {
const errors = await handleSubmit(data); const errors = await handleSubmit(data, nextAction);
if (errors?.length === 0) { if (errors?.length === 0) {
handleSubmitNextAction(); handleSubmitNextAction(nextAction);
} else { } else {
setSubmitNextAction(null); setSubmitNextAction(null);
} }
}} }}
onSubmitReject={handleSubmitNextAction} onSubmitSkip={handleSubmitNextAction}
onVariantClick={handleVariantClick} onVariantClick={handleVariantClick}
onVariantReorder={handleVariantReorder} onVariantReorder={handleVariantReorder}
saveButtonBarState={variantCreateResult.status} saveButtonBarState={variantCreateResult.status}
@ -176,8 +181,6 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
warehouses.data?.warehouses.edges.map(edge => edge.node) || [] warehouses.data?.warehouses.edges.map(edge => edge.node) || []
} }
weightUnit={shop?.defaultWeightUnit} weightUnit={shop?.defaultWeightUnit}
submitNextAction={submitNextAction}
setSubmitNextAction={setSubmitNextAction}
/> />
</> </>
); );

View file

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