Convert product category form to RHF

app/frontend/src/javascript/components/store/manage-product-category.tsx

@@ -15,7 +15,7 @@ interface ManageProductCategoryProps {
 
 /**
  * This component shows a button.
- * When clicked, we show a modal dialog allowing to fill the parameters of a product category (create new or update existing).
+ * When clicked, we show a modal dialog allowing to fill the parameters of a product category.
  */
 export const ManageProductCategory: React.FC<ManageProductCategoryProps> = ({ productCategories, productCategory, action, onSuccess, onError }) => {
   const { t } = useTranslation('admin');

app/frontend/src/javascript/components/store/product-categories.tsx

@@ -18,7 +18,8 @@ interface ProductCategoriesProps {
 }
 
 /**
- * This component shows a Tree list of all Product's Categories
+ * This component shows a list of all product categories and offer to manager them
+ * by creating, deleting, modifying and reordering each product categories.
  */
 const ProductCategories: React.FC<ProductCategoriesProps> = ({ onSuccess, onError }) => {
   const { t } = useTranslation('admin');

app/frontend/src/javascript/components/store/product-category-form.tsx

@@ -29,7 +29,7 @@ interface ProductCategoryFormProps {
 export const ProductCategoryForm: React.FC<ProductCategoryFormProps> = ({ action, productCategories, productCategory, onSuccess, onError }) => {
   const { t } = useTranslation('admin');
 
-  const { register, watch, setValue, control, handleSubmit } = useForm<ProductCategory>({ defaultValues: { ...productCategory } });
+  const { register, watch, setValue, control, handleSubmit, formState } = useForm<ProductCategory>({ defaultValues: { ...productCategory } });
 
   // filter all first level product categorie
   const parents = productCategories.filter(c => !c.parent_id);
@@ -53,15 +53,26 @@ export const ProductCategoryForm: React.FC<ProductCategoryFormProps> = ({ action
     });
     return () => subscription.unsubscribe();
   }, [watch]);
+  // Check slug pattern
+  // Only lowercase alphanumeric groups of characters separated by an hyphen
+  const slugPattern = /^[a-z0-9]+(?:-[a-z0-9]+)*$/g;
 
   // Form submit
   const onSubmit: SubmitHandler<ProductCategory> = (category: ProductCategory) => {
     switch (action) {
       case 'create':
-        console.log('create:', category);
+        ProductCategoryAPI.create(category).then(() => {
+          onSuccess(t('app.admin.store.product_category_form.create.success'));
+        }).catch((error) => {
+          onError(t('app.admin.store.product_category_form.create.error') + error);
+        });
         break;
       case 'update':
-        console.log('update:', category);
+        ProductCategoryAPI.update(category).then(() => {
+          onSuccess(t('app.admin.store.product_category_form.update.success'));
+        }).catch((error) => {
+          onError(t('app.admin.store.product_category_form.update.error') + error);
+        });
         break;
       case 'delete':
         ProductCategoryAPI.destroy(category.id).then(() => {
@@ -84,13 +95,21 @@ export const ProductCategoryForm: React.FC<ProductCategoryFormProps> = ({ action
           </>
         : <>
             <FormInput id='name'
-                  register={register}
+                       register={register}
-                  rules={{ required: 'true' }}
+                       rules={{ required: `${t('app.admin.store.product_category_form.required')}` }}
-                  label={t('app.admin.store.product_category_form.name')}
+                       formState={formState}
-                  defaultValue={productCategory?.name || ''} />
+                       label={t('app.admin.store.product_category_form.name')}
+                       defaultValue={productCategory?.name || ''} />
             <FormInput id='slug'
                       register={register}
-                      rules={{ required: 'true' }}
+                      rules={{
+                        required: `${t('app.admin.store.product_category_form.required')}`,
+                        pattern: {
+                          value: slugPattern,
+                          message: `${t('app.admin.store.product_category_form.slug_pattern')}`
+                        }
+                      }}
+                      formState={formState}
                       label={t('app.admin.store.product_category_form.slug')}
                       defaultValue={productCategory?.slug} />
             <FormSelect id='parent_id'

config/locales/app.admin.en.yml

@@ -1907,18 +1907,22 @@ en:
           update: "Modify the product category"
           delete: "Delete the product category"
         product_category_modal:
-          successfully_created: "The new category has been created."
-          unable_to_create: "Unable to create the category: "
-          successfully_updated: "The category has been updated."
-          unable_to_update: "Unable to modify the category: "
           new_product_category: "Create a category"
           edit_product_category: "Modify a category"
         product_category_form:
           name: "Name of category"
           slug: "Name of URL"
           select_parent_product_category: "Choose a parent category (N1)"
+          create:
+            error: "Unable to create the category: "
+            success: "The new category has been created."
+          update:
+            error: "Unable to modify the category: "
+            success: "The category has been modified."
           delete:
             confirm: "Do you really want to delete this product category?"
             error: "Unable to delete the category: "
             success: "The category has been successfully deleted"
           save: "Save"
+          required: "This field is required"
+          slug_pattern: "Only lowercase alphanumeric groups of characters separated by an hyphen"

config/locales/app.admin.fr.yml

@@ -1907,18 +1907,22 @@ fr:
           update: "Update the product category"
           delete: "Delete the product category"
         product_category_modal:
-          successfully_created: "La catégorie a bien été créée."
-          unable_to_create: "Impossible de créer la catégorie : "
-          successfully_updated: "La nouvelle catégorie a bien été mise à jour."
-          unable_to_update: "Impossible de modifier la catégorie : "
           new_product_category: "Créer une catégorie"
           edit_product_category: "Modifier la catégorie"
         product_category_form:
           name: "Nom de la catégorie"
           slug: "Nom de l'URL"
           select_parent_product_category: "Choisir une catégorie parent (N1)"
+          create:
+            error: "Impossible de créer la catégorie : "
+            success: "La catégorie a bien été créée."
+          update:
+            error: "Impossible de modifier la catégorie : "
+            success: "La nouvelle catégorie a bien été mise à jour."
           delete:
             confirm: "Do you really want to delete this product category?"
             error: "Impossible de supprimer the catégorie : "
             success: "La catégorie a bien été supprimée"
           save: "Enregistrer"
+          required: "This field is required"
+          slug_pattern: "Only lowercase alphanumeric groups of characters separated by an hyphen"