Remove react-beautiful-dnd

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ProductCategory } from '../../../models/product-category';
+import { ManageProductCategory } from './manage-product-category';
+import { FabButton } from '../../base/fab-button';
+import { DotsSixVertical } from 'phosphor-react';
+
+interface ProductCategoriesItemProps {
+  productCategories: Array<ProductCategory>,
+  category: ProductCategory,
+  onSuccess: (message: string) => void,
+  onError: (message: string) => void,
+}
+
+/**
+ * Renders a draggable category item
+ */
+export const ProductCategoriesItem: React.FC<ProductCategoriesItemProps> = ({ productCategories, category, onSuccess, onError }) => {
+  return (
+    <div key={category.id} className='product-categories-item'>
+      <div className='itemInfo'>
+        <p className='itemInfo-name'>{category.name}</p>
+        <span className='itemInfo-count'>[count]</span>
+      </div>
+      <div className='action'>
+        <div className='manage'>
+          <ManageProductCategory action='update'
+            productCategories={productCategories}
+            productCategory={category}
+            onSuccess={onSuccess} onError={onError} />
+          <ManageProductCategory action='delete'
+            productCategories={productCategories}
+            productCategory={category}
+            onSuccess={onSuccess} onError={onError} />
+        </div>
+        <div>
+          <FabButton icon={<DotsSixVertical size={16} />} className='draghandle' />
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -32,15 +32,22 @@ export const ProductCategoryForm: React.FC<ProductCategoryFormProps> = ({ action
   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);
+  let parents = productCategories.filter(c => !c.parent_id);
+  if (action === 'update') {
+    parents = parents.filter(c => c.id !== productCategory.id);
+  }
 
   /**
    * Convert all parents to the react-select format
    */
   const buildOptions = (): Array<selectOption> => {
-    return parents.map(t => {
+    const options = parents.map(t => {
       return { value: t.id, label: t.name };
     });
+    if (action === 'update') {
+      options.unshift({ value: null, label: t('app.admin.store.product_category_form.no_parent') });
+    }
+    return options;
   };
 
   // Create slug from category's name

config/locales/app.admin.en.yml

@@ -1914,6 +1914,7 @@ en:
           name: "Name of category"
           slug: "Name of URL"
           select_parent_product_category: "Choose a parent category (N1)"
+          no_parent: "No parent"
           create:
             error: "Unable to create the category: "
             success: "The new category has been created."