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 ProductVariantAttributes, {
-  VariantAttributeInputData
-} from "../ProductVariantAttributes";
+import ProductStocks from "../ProductStocks";
+import ProductVariantAttributes from "../ProductVariantAttributes";
 import ProductVariantNavigation from "../ProductVariantNavigation";
 import ProductVariantPrice from "../ProductVariantPrice";
-
-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[];
-}
+import ProductVariantCreateForm, { ProductVariantCreateData } from "./form";
 
 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,60 +52,22 @@ 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}>
-      {({ change, data, hasChanged, submit, triggerChange }) => {
-        const handleAttributeChange: FormsetChange = (id, value) => {
-          changeAttributeData(id, value);
-          triggerChange();
-        };
-        const changeMetadata = makeMetadataChangeHandler(change);
 
   return (
+    <ProductVariantCreateForm
+      product={product}
+      onSubmit={onSubmit}
+      warehouses={warehouses}
+    >
+      {({ change, data, handlers, hasChanged, submit }) => (
         <Container>
-            <AppHeader onBack={onBack}>{maybe(() => product.name)}</AppHeader>
+          <AppHeader onBack={onBack}>{product?.name}</AppHeader>
           <PageHeader title={header} />
           <Grid variant="inverted">
             <div>
               <ProductVariantNavigation
-                  fallbackThumbnail={maybe(() => product.thumbnail.url)}
-                  variants={maybe(() => product.variants)}
+                fallbackThumbnail={product?.thumbnail?.url}
+                variants={product?.variants}
                 onRowClick={(variantId: string) => {
                   if (product && product.variants) {
                     return onVariantClick(variantId);
@@ -141,10 +78,10 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
             </div>
             <div>
               <ProductVariantAttributes
-                  attributes={attributes}
+                attributes={data.attributes}
                 disabled={disabled}
                 errors={errors}
-                  onChange={handleAttributeChange}
+                onChange={handlers.selectAttribute}
               />
               <CardSpacer />
               <ProductVariantPrice
@@ -169,30 +106,15 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                 hasVariants={true}
                 onFormDataChange={change}
                 errors={errors}
-                  stocks={stocks}
+                stocks={data.stocks}
                 warehouses={warehouses}
-                  onChange={(id, value) => {
-                    triggerChange();
-                    changeStockData(id, value);
-                  }}
-                  onWarehouseStockAdd={id => {
-                    triggerChange();
-                    addStock({
-                      data: null,
-                      id,
-                      label: warehouses.find(warehouse => warehouse.id === id)
-                        .name,
-                      value: "0"
-                    });
-                  }}
-                  onWarehouseStockDelete={id => {
-                    triggerChange();
-                    removeStock(id);
-                  }}
+                onChange={handlers.changeStock}
+                onWarehouseStockAdd={handlers.addStock}
+                onWarehouseStockDelete={handlers.deleteStock}
                 onWarehouseConfigure={onWarehouseConfigure}
               />
               <CardSpacer />
-                <Metadata data={data} onChange={changeMetadata} />
+              <Metadata data={data} onChange={handlers.changeMetadata} />
             </div>
           </Grid>
           <SaveButtonBar
@@ -212,9 +134,8 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
             onSave={submit}
           />
         </Container>
-        );
-      }}
-    </Form>
+      )}
+    </ProductVariantCreateForm>
   );
 };
 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(() =>
-    product.productType.variantAttributes.map(attribute => ({
+  return product?.productType?.variantAttributes?.map(attribute => ({
     data: {
       values: attribute.values
     },
     id: attribute.id,
     label: attribute.name,
     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, {
-  ProductVariantCreatePageSubmitData
-} from "../components/ProductVariantCreatePage";
+import ProductVariantCreatePage from "../components/ProductVariantCreatePage";
+import { ProductVariantCreateData } from "../components/ProductVariantCreatePage/form";
 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: {