Extarct variant create form component

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -61,13 +61,13 @@ export interface ProductUpdatePageProps extends ListActions {
   onVariantShow: (id: string) => () => void;
   onVariantReorder: ReorderAction;
   onImageDelete: (id: string) => () => void;
+  onSubmit: (data: ProductUpdatePageSubmitData) => Promise<boolean>;
   onBack?();
   onDelete();
   onImageEdit?(id: string);
   onImageReorder?(event: { oldIndex: number; newIndex: number });
   onImageUpload(file: File);
   onSeoClick?();
-  onSubmit?(data: ProductUpdatePageSubmitData);
   onVariantAdd?();
   onSetDefaultVariant(variant: ProductDetails_product_variants);
   onWarehouseConfigure();

src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx

@@ -2,48 +2,23 @@ import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 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 Metadata from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
-import useFormset, {
-  FormsetChange,
-  FormsetData
-} from "@saleor/hooks/useFormset";
-import { getVariantAttributeInputFromProduct } from "@saleor/products/utils/data";
 import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
 import { ReorderAction } from "@saleor/types";
-import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { maybe } from "../../../misc";
 import { ProductVariantCreateData_product } from "../../types/ProductVariantCreateData";
 import ProductShipping from "../ProductShipping/ProductShipping";
-import ProductStocks, { ProductStockInput } from "../ProductStocks";
+import ProductStocks from "../ProductStocks";
-import ProductVariantAttributes, {
+import ProductVariantAttributes from "../ProductVariantAttributes";
-  VariantAttributeInputData
-} from "../ProductVariantAttributes";
 import ProductVariantNavigation from "../ProductVariantNavigation";
 import ProductVariantPrice from "../ProductVariantPrice";
-
+import ProductVariantCreateForm, { ProductVariantCreateData } from "./form";
-interface ProductVariantCreatePageFormData extends MetadataFormData {
-  costPrice: string;
-  images: string[];
-  price: string;
-  quantity: string;
-  sku: string;
-  trackInventory: boolean;
-  weight: string;
-}
-
-export interface ProductVariantCreatePageSubmitData
-  extends ProductVariantCreatePageFormData {
-  attributes: FormsetData<VariantAttributeInputData>;
-  stocks: ProductStockInput[];
-}
 
 interface ProductVariantCreatePageProps {
   currencySymbol: string;
@@ -55,7 +30,7 @@ interface ProductVariantCreatePageProps {
   warehouses: SearchWarehouses_search_edges_node[];
   weightUnit: string;
   onBack: () => void;
-  onSubmit: (data: ProductVariantCreatePageSubmitData) => void;
+  onSubmit: (data: ProductVariantCreateData) => void;
   onVariantClick: (variantId: string) => void;
   onVariantReorder: ReorderAction;
   onWarehouseConfigure: () => void;
@@ -77,144 +52,90 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
   onWarehouseConfigure
 }) => {
   const intl = useIntl();
-  const attributeInput = React.useMemo(
-    () => getVariantAttributeInputFromProduct(product),
-    [product]
-  );
-  const { change: changeAttributeData, data: attributes } = useFormset(
-    attributeInput
-  );
-  const {
-    add: addStock,
-    change: changeStockData,
-    data: stocks,
-    remove: removeStock
-  } = useFormset<null, string>([]);
-  const {
-    makeChangeHandler: makeMetadataChangeHandler
-  } = useMetadataChangeTrigger();
-
-  const initialForm: ProductVariantCreatePageFormData = {
-    costPrice: "",
-    images: product?.images.map(image => image.id),
-    metadata: [],
-    price: "",
-    privateMetadata: [],
-    quantity: "0",
-    sku: "",
-    trackInventory: true,
-    weight: ""
-  };
-
-  const handleSubmit = (data: ProductVariantCreatePageFormData) =>
-    onSubmit({
-      ...data,
-      attributes,
-      stocks
-    });
 
   return (
-    <Form initial={initialForm} onSubmit={handleSubmit}>
+    <ProductVariantCreateForm
-      {({ change, data, hasChanged, submit, triggerChange }) => {
+      product={product}
-        const handleAttributeChange: FormsetChange = (id, value) => {
+      onSubmit={onSubmit}
-          changeAttributeData(id, value);
+      warehouses={warehouses}
-          triggerChange();
+    >
-        };
+      {({ change, data, handlers, hasChanged, submit }) => (
-        const changeMetadata = makeMetadataChangeHandler(change);
+        <Container>
-
+          <AppHeader onBack={onBack}>{product?.name}</AppHeader>
-        return (
+          <PageHeader title={header} />
-          <Container>
+          <Grid variant="inverted">
-            <AppHeader onBack={onBack}>{maybe(() => product.name)}</AppHeader>
+            <div>
-            <PageHeader title={header} />
+              <ProductVariantNavigation
-            <Grid variant="inverted">
+                fallbackThumbnail={product?.thumbnail?.url}
-              <div>
+                variants={product?.variants}
-                <ProductVariantNavigation
+                onRowClick={(variantId: string) => {
-                  fallbackThumbnail={maybe(() => product.thumbnail.url)}
+                  if (product && product.variants) {
-                  variants={maybe(() => product.variants)}
+                    return onVariantClick(variantId);
-                  onRowClick={(variantId: string) => {
+                  }
-                    if (product && product.variants) {
+                }}
-                      return onVariantClick(variantId);
+                onReorder={onVariantReorder}
-                    }
+              />
-                  }}
+            </div>
-                  onReorder={onVariantReorder}
+            <div>
-                />
+              <ProductVariantAttributes
-              </div>
+                attributes={data.attributes}
-              <div>
+                disabled={disabled}
-                <ProductVariantAttributes
+                errors={errors}
-                  attributes={attributes}
+                onChange={handlers.selectAttribute}
-                  disabled={disabled}
+              />
-                  errors={errors}
+              <CardSpacer />
-                  onChange={handleAttributeChange}
+              <ProductVariantPrice
-                />
+                data={data}
-                <CardSpacer />
+                errors={errors}
-                <ProductVariantPrice
+                currencySymbol={currencySymbol}
-                  data={data}
+                loading={disabled}
-                  errors={errors}
+                onChange={change}
-                  currencySymbol={currencySymbol}
+              />
-                  loading={disabled}
+              <CardSpacer />
-                  onChange={change}
+              <ProductShipping
-                />
+                data={data}
-                <CardSpacer />
+                disabled={disabled}
-                <ProductShipping
+                errors={errors}
-                  data={data}
+                weightUnit={weightUnit}
-                  disabled={disabled}
+                onChange={change}
-                  errors={errors}
+              />
-                  weightUnit={weightUnit}
+              <CardSpacer />
-                  onChange={change}
+              <ProductStocks
-                />
+                data={data}
-                <CardSpacer />
+                disabled={disabled}
-                <ProductStocks
+                hasVariants={true}
-                  data={data}
+                onFormDataChange={change}
-                  disabled={disabled}
+                errors={errors}
-                  hasVariants={true}
+                stocks={data.stocks}
-                  onFormDataChange={change}
+                warehouses={warehouses}
-                  errors={errors}
+                onChange={handlers.changeStock}
-                  stocks={stocks}
+                onWarehouseStockAdd={handlers.addStock}
-                  warehouses={warehouses}
+                onWarehouseStockDelete={handlers.deleteStock}
-                  onChange={(id, value) => {
+                onWarehouseConfigure={onWarehouseConfigure}
-                    triggerChange();
+              />
-                    changeStockData(id, value);
+              <CardSpacer />
-                  }}
+              <Metadata data={data} onChange={handlers.changeMetadata} />
-                  onWarehouseStockAdd={id => {
+            </div>
-                    triggerChange();
+          </Grid>
-                    addStock({
+          <SaveButtonBar
-                      data: null,
+            disabled={disabled || !onSubmit || !hasChanged}
-                      id,
+            labels={{
-                      label: warehouses.find(warehouse => warehouse.id === id)
+              delete: intl.formatMessage({
-                        .name,
+                defaultMessage: "Delete Variant",
-                      value: "0"
+                description: "button"
-                    });
+              }),
-                  }}
+              save: intl.formatMessage({
-                  onWarehouseStockDelete={id => {
+                defaultMessage: "Save variant",
-                    triggerChange();
+                description: "button"
-                    removeStock(id);
+              })
-                  }}
+            }}
-                  onWarehouseConfigure={onWarehouseConfigure}
+            state={saveButtonBarState}
-                />
+            onCancel={onBack}
-                <CardSpacer />
+            onSave={submit}
-                <Metadata data={data} onChange={changeMetadata} />
+          />
-              </div>
+        </Container>
-            </Grid>
+      )}
-            <SaveButtonBar
+    </ProductVariantCreateForm>
-              disabled={disabled || !onSubmit || !hasChanged}
-              labels={{
-                delete: intl.formatMessage({
-                  defaultMessage: "Delete Variant",
-                  description: "button"
-                }),
-                save: intl.formatMessage({
-                  defaultMessage: "Save variant",
-                  description: "button"
-                })
-              }}
-              state={saveButtonBarState}
-              onCancel={onBack}
-              onSave={submit}
-            />
-          </Container>
-        );
-      }}
-    </Form>
   );
 };
 ProductVariantCreatePage.displayName = "ProductVariantCreatePage";

src/products/components/ProductVariantCreatePage/form.tsx

@@ -0,0 +1,141 @@
+import { MetadataFormData } from "@saleor/components/Metadata";
+import useForm, { FormChange } from "@saleor/hooks/useForm";
+import useFormset, {
+  FormsetChange,
+  FormsetData
+} from "@saleor/hooks/useFormset";
+import { ProductVariantCreateData_product } from "@saleor/products/types/ProductVariantCreateData";
+import { getVariantAttributeInputFromProduct } from "@saleor/products/utils/data";
+import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
+import React from "react";
+
+import { ProductStockInput } from "../ProductStocks";
+import { VariantAttributeInputData } from "../ProductVariantAttributes";
+
+export interface ProductVariantCreateFormData extends MetadataFormData {
+  costPrice: string;
+  price: string;
+  quantity: string;
+  sku: string;
+  trackInventory: boolean;
+  weight: string;
+}
+export interface ProductVariantCreateData extends ProductVariantCreateFormData {
+  attributes: FormsetData<VariantAttributeInputData>;
+  stocks: ProductStockInput[];
+}
+
+export interface UseProductVariantCreateFormOpts {
+  warehouses: SearchWarehouses_search_edges_node[];
+}
+
+export interface UseProductVariantCreateFormResult {
+  change: FormChange;
+  data: ProductVariantCreateData;
+  handlers: Record<"changeStock" | "selectAttribute", FormsetChange> &
+    Record<"addStock" | "deleteStock", (id: string) => void> & {
+      changeMetadata: FormChange;
+    };
+  hasChanged: boolean;
+  submit: () => void;
+}
+
+export interface ProductVariantCreateFormProps
+  extends UseProductVariantCreateFormOpts {
+  children: (props: UseProductVariantCreateFormResult) => React.ReactNode;
+  product: ProductVariantCreateData_product;
+  onSubmit: (data: ProductVariantCreateData) => void;
+}
+
+const initial: ProductVariantCreateFormData = {
+  costPrice: "",
+  metadata: [],
+  price: "",
+  privateMetadata: [],
+  quantity: "0",
+  sku: "",
+  trackInventory: true,
+  weight: ""
+};
+
+function useProductVariantCreateForm(
+  product: ProductVariantCreateData_product,
+  onSubmit: (data: ProductVariantCreateData) => void,
+  opts: UseProductVariantCreateFormOpts
+): UseProductVariantCreateFormResult {
+  const [changed, setChanged] = React.useState(false);
+  const triggerChange = () => setChanged(true);
+
+  const attributeInput = getVariantAttributeInputFromProduct(product);
+
+  const form = useForm(initial);
+  const attributes = useFormset(attributeInput);
+  const stocks = useFormset<null, string>([]);
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
+
+  const handleChange: FormChange = (event, cb) => {
+    form.change(event, cb);
+    triggerChange();
+  };
+  const changeMetadata = makeMetadataChangeHandler(handleChange);
+  const handleAttributeChange: FormsetChange = (id, value) => {
+    attributes.change(id, value);
+    triggerChange();
+  };
+  const handleStockAdd = (id: string) => {
+    triggerChange();
+    stocks.add({
+      data: null,
+      id,
+      label: opts.warehouses.find(warehouse => warehouse.id === id).name,
+      value: "0"
+    });
+  };
+  const handleStockChange = (id: string, value: string) => {
+    triggerChange();
+    stocks.change(id, value);
+  };
+  const handleStockDelete = (id: string) => {
+    triggerChange();
+    stocks.remove(id);
+  };
+
+  const data: ProductVariantCreateData = {
+    ...form.data,
+    attributes: attributes.data,
+    stocks: stocks.data
+  };
+
+  const submit = () => onSubmit(data);
+
+  return {
+    change: handleChange,
+    data,
+    handlers: {
+      addStock: handleStockAdd,
+      changeMetadata,
+      changeStock: handleStockChange,
+      deleteStock: handleStockDelete,
+      selectAttribute: handleAttributeChange
+    },
+    hasChanged: changed,
+    submit
+  };
+}
+
+const ProductVariantCreateForm: React.FC<ProductVariantCreateFormProps> = ({
+  children,
+  product,
+  onSubmit,
+  ...rest
+}) => {
+  const props = useProductVariantCreateForm(product, onSubmit, rest);
+
+  return <form onSubmit={props.submit}>{children(props)}</form>;
+};
+
+ProductVariantCreateForm.displayName = "ProductVariantCreateForm";
+export default ProductVariantCreateForm;

src/products/utils/data.ts

@@ -123,16 +123,14 @@ export function getStockInputFromVariant(
 export function getVariantAttributeInputFromProduct(
   product: ProductVariantCreateData_product
 ): VariantAttributeInput[] {
-  return maybe(() =>
+  return product?.productType?.variantAttributes?.map(attribute => ({
-    product.productType.variantAttributes.map(attribute => ({
+    data: {
-      data: {
+      values: attribute.values
-        values: attribute.values
+    },
-      },
+    id: attribute.id,
-      id: attribute.id,
+    label: attribute.name,
-      label: attribute.name,
+    value: ""
-      value: ""
+  }));
-    }))
-  );
 }
 
 export function getStockInputFromProduct(

src/products/views/ProductVariantCreate.tsx

@@ -15,9 +15,8 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { decimal, weight } from "../../misc";
-import ProductVariantCreatePage, {
+import ProductVariantCreatePage from "../components/ProductVariantCreatePage";
-  ProductVariantCreatePageSubmitData
+import { ProductVariantCreateData } from "../components/ProductVariantCreatePage/form";
-} from "../components/ProductVariantCreatePage";
 import {
   useProductVariantReorderMutation,
   useVariantCreateMutation
@@ -84,7 +83,7 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
   );
 
   const handleBack = () => navigate(productUrl(productId));
-  const handleCreate = async (formData: ProductVariantCreatePageSubmitData) => {
+  const handleCreate = async (formData: ProductVariantCreateData) => {
     const result = await variantCreate({
       variables: {
         input: {