Fix: Fix create new product image errors

Author: treoden

packages/evershop/src/modules/catalog/pages/admin/productEdit/ProductEditForm.tsx

@@ -48,7 +48,7 @@ export default function ProductEditForm({
   const submit: SubmitHandler<any> = async (data) => {
     try {
       const images = (data.images || []).map(
-        (image: { id: string; url: string }) => image.url
+        (image: { uuid: string; url: string }) => image.url
       );
       data.images = images;
       const response = await fetch(action, {

packages/evershop/src/modules/catalog/pages/admin/productNew/ProductNewForm.tsx

@@ -2,6 +2,7 @@ import { FormButtons } from '@components/admin/FormButtons.js';
 import Area from '@components/common/Area.js';
 import { Form } from '@components/common/form/Form.js';
 import React from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
 
 export default function ProductNewForm({
@@ -11,22 +12,46 @@ export default function ProductNewForm({
   action: string;
   gridUrl: string;
 }) {
+  const form = useForm({
+    shouldUnregister: true
+  });
+  const submit: SubmitHandler<any> = async (data) => {
+    try {
+      const images = (data.images || []).map(
+        (image: { uuid: string; url: string }) => image.url
+      );
+      data.images = images;
+      const response = await fetch(action, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ ...data, action: undefined, method: undefined })
+      });
+      const result = await response.json();
+      if (result.error) {
+        toast.error(result.error.message);
+      } else {
+        toast.success('Product created successfully');
+        const editUrl = result.data.links.find(
+          (link) => link.rel === 'edit'
+        ).href;
+        setTimeout(() => {
+          window.location.href = editUrl;
+        }, 1500);
+      }
+    } catch (error) {
+      toast.error(error.message);
+    }
+  };
   return (
     <Form
       id="productNewForm"
       method="POST"
       action={action}
+      form={form}
+      onSubmit={submit}
       submitBtn={false}
-      onSuccess={(response) => {
-        toast.success('Product created successfully!');
-        const editUrl = response.data.links.find(
-          (link) => link.rel === 'edit'
-        ).href;
-        window.location.href = editUrl;
-        setTimeout(() => {
-          window.location.href = gridUrl;
-        }, 1500);
-      }}
     >
       <div className="grid grid-cols-3 gap-x-5 grid-flow-row ">
         <div className="col-span-2 grid grid-cols-1 gap-5 auto-rows-max">