diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx index 9797ff062..0d729ce4d 100644 --- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx +++ b/src/products/components/ProductCreatePage/ProductCreatePage.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 Metadata, { MetadataFormData } from "@saleor/components/Metadata"; import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField"; import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; @@ -25,6 +26,7 @@ import { SearchProductTypes_search_edges_node_productAttributes } from "@saleor/ import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses"; import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; +import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; import { ContentState, convertToRaw, RawDraftContentState } from "draft-js"; import React from "react"; import { useIntl } from "react-intl"; @@ -45,7 +47,7 @@ import ProductPricing from "../ProductPricing"; import ProductShipping from "../ProductShipping/ProductShipping"; import ProductStocks, { ProductStockInput } from "../ProductStocks"; -interface FormData { +interface FormData extends MetadataFormData { basePrice: number; publicationDate: string; category: string; @@ -133,6 +135,13 @@ export const ProductCreatePage: React.FC = ({ const initialDescription = React.useRef( convertToRaw(ContentState.createFromText("")) ); + + const { + isMetadataModified, + isPrivateMetadataModified, + makeChangeHandler: makeMetadataChangeHandler + } = useMetadataChangeTrigger(); + const initialData: FormData = { basePrice: 0, category: "", @@ -140,7 +149,9 @@ export const ProductCreatePage: React.FC = ({ collections: [], description: {} as any, isPublished: false, + metadata: [], name: "", + privateMetadata: [], productType: "", publicationDate: "", seoDescription: "", @@ -168,12 +179,20 @@ export const ProductCreatePage: React.FC = ({ const collections = getChoices(collectionChoiceList); const productTypes = getChoices(productTypeChoiceList); - const handleSubmit = (data: FormData) => + const handleSubmit = (data: FormData) => { + const metadata = isMetadataModified ? data.metadata : undefined; + const privateMetadata = isPrivateMetadataModified + ? data.privateMetadata + : undefined; + onSubmit({ + ...data, attributes, - stocks, - ...data + metadata, + privateMetadata, + stocks }); + }; return (
@@ -212,6 +231,8 @@ export const ProductCreatePage: React.FC = ({ productTypeChoiceList ); + const changeMetadata = makeMetadataChangeHandler(change); + return ( @@ -296,6 +317,8 @@ export const ProductCreatePage: React.FC = ({ loading={disabled} onChange={change} /> + +
{ first: 50 } }); + const [updateMetadata] = useMetadataUpdate({}); + const [updatePrivateMetadata] = usePrivateMetadataUpdate({}); const handleBack = () => navigate(productListUrl()); @@ -66,8 +73,8 @@ export const ProductCreateView: React.FC = () => { } }); - const handleSubmit = (formData: ProductCreatePageSubmitData) => { - productCreate({ + const handleCreate = async (formData: ProductCreatePageSubmitData) => { + const result = await productCreate({ variables: { attributes: formData.attributes.map(attribute => ({ id: attribute.id, @@ -96,7 +103,14 @@ export const ProductCreateView: React.FC = () => { weight: weight(formData.weight) } }); + + return result.data.productCreate?.product?.id || null; }; + const handleSubmit = createMetadataCreateHandler( + handleCreate, + updateMetadata, + updatePrivateMetadata + ); return ( <> diff --git a/src/utils/handlers/metadataCreateHandler.ts b/src/utils/handlers/metadataCreateHandler.ts new file mode 100644 index 000000000..e24491b80 --- /dev/null +++ b/src/utils/handlers/metadataCreateHandler.ts @@ -0,0 +1,68 @@ +import { MetadataFormData } from "@saleor/components/Metadata/types"; +import { MutationFunction } from "react-apollo"; + +import { + UpdateMetadata, + UpdateMetadataVariables +} from "../metadata/types/UpdateMetadata"; +import { + UpdatePrivateMetadata, + UpdatePrivateMetadataVariables +} from "../metadata/types/UpdatePrivateMetadata"; + +function createMetadataCreateHandler( + create: (data: T) => Promise, + setMetadata: MutationFunction, + setPrivateMetadata: MutationFunction< + UpdatePrivateMetadata, + UpdatePrivateMetadataVariables + > +) { + return async (data: T) => { + const id = await create(data); + + if (id === null) { + return null; + } + + if (data.metadata.length > 0) { + const updateMetaResult = await setMetadata({ + variables: { + id, + input: data.metadata, + keysToDelete: [] + } + }); + const updateMetaErrors = [ + ...(updateMetaResult.data.deleteMetadata.errors || []), + ...(updateMetaResult.data.updateMetadata.errors || []) + ]; + + if (updateMetaErrors.length > 0) { + return updateMetaErrors; + } + } + if (data.privateMetadata.length > 0) { + const updatePrivateMetaResult = await setPrivateMetadata({ + variables: { + id, + input: data.privateMetadata, + keysToDelete: [] + } + }); + + const updatePrivateMetaErrors = [ + ...(updatePrivateMetaResult.data.deletePrivateMetadata.errors || []), + ...(updatePrivateMetaResult.data.updatePrivateMetadata.errors || []) + ]; + + if (updatePrivateMetaErrors.length > 0) { + return updatePrivateMetaErrors; + } + } + + return []; + }; +} + +export default createMetadataCreateHandler;