Feat/mm2 2542

src/assets/icons/BannerIcon.tsx

@@ -0,0 +1,61 @@
+export const BannerIcon = () => {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="7.5"
+        cy="7.5"
+        r="7.5"
+        fill="#2563EB"
+      />
+      <circle
+        cx="7.5"
+        cy="7.5"
+        r="7.5"
+        fill="url(#paint0_linear_40013968_29010)"
+        fillOpacity="0.2"
+      />
+      <circle
+        cx="7.5"
+        cy="7.5"
+        r="7.25"
+        stroke="#18181B"
+        strokeOpacity="0.24"
+        strokeWidth="0.5"
+      />
+      <path
+        d="M10.23 4.25H4.77C4.48281 4.25 4.25 4.48281 4.25 4.77V6.59C4.25 6.87719 4.48281 7.11 4.77 7.11H10.23C10.5172 7.11 10.75 6.87719 10.75 6.59V4.77C10.75 4.48281 10.5172 4.25 10.23 4.25Z"
+        fill="white"
+      />
+      <path
+        d="M4.25 8.93H10.75M4.25 10.75H10.75M4.77 4.25H10.23C10.5172 4.25 10.75 4.48281 10.75 4.77V6.59C10.75 6.87719 10.5172 7.11 10.23 7.11H4.77C4.48281 7.11 4.25 6.87719 4.25 6.59V4.77C4.25 4.48281 4.48281 4.25 4.77 4.25Z"
+        stroke="white"
+        strokeWidth="0.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_40013968_29010"
+          x1="7.5"
+          y1="0"
+          x2="7.5"
+          y2="15"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="white" />
+          <stop
+            offset="1"
+            stopColor="white"
+            stopOpacity="0"
+          />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

src/assets/icons/ThumbnailIcon.tsx

@@ -0,0 +1,33 @@
+export const ThumbnailIcon = () => {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.389 10.3887L1.64055 10.6385C1.35255 10.7345 1.05566 10.5203 1.05566 10.2172V4.78338C1.05566 4.48027 1.35255 4.26604 1.64055 4.36204L2.389 4.61182"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.94466 12.0553L5.22644 12.3549C4.93399 12.4767 4.61133 12.2615 4.61133 11.9442V3.05532C4.61133 2.73799 4.93399 2.52288 5.22644 2.64466L5.94466 2.94421"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.79762 1.12399L13.4287 3.26088C13.7434 3.40577 13.9452 3.72132 13.9452 4.06799V10.9302C13.9452 11.2769 13.7434 11.5924 13.4287 11.7373L8.79762 13.8742C8.50339 14.0102 8.1665 13.7951 8.1665 13.4707V1.52754C8.1665 1.2031 8.5025 0.987988 8.79762 1.12399Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

src/dashboard-app/routes/get-route.map.tsx

@@ -260,6 +260,11 @@ export function getRouteMap({
                     };
                   },
                   children: [
+                    {
+                      path: 'media',
+                      lazy: () =>
+                        import("../../routes/categories/category-media"),
+                    },
                     {
                       path: "edit",
                       lazy: () =>

src/hooks/api/categories.tsx

@@ -11,6 +11,7 @@ import { sdk } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
 import { productsQueryKeys } from "./products"
+import { CategoryDetail } from "@routes/categories/category-detail/types"
 
 const CATEGORIES_QUERY_KEY = "categories" as const
 export const categoriesQueryKeys = queryKeysFactory(CATEGORIES_QUERY_KEY)
@@ -98,6 +99,33 @@ export const useUpdateProductCategory = (
   })
 }
 
+export const useUpdateProductCategoryDetails = () => {
+  return useMutation({
+    mutationFn: ({
+      id,
+      payload
+    }: {
+      id: string;
+      payload: {
+        media: { delete?: string[]; create?: { url: string; alt_text?: string }[] };
+        thumbnail?: { url: string} | string | null;
+        icon?: { url: string} | string |null;
+        banner?: { url: string} | string| null;
+        rank?: number | null;
+      };
+    }) =>
+      sdk.client.fetch<{
+        category_detail: CategoryDetail;
+      }>(`/admin/product-categories/${id}/details`, {
+        method: 'POST',
+        body: payload
+      }),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: categoriesQueryKeys.detail(variables.id) });
+    }
+  });
+};
+
 export const useDeleteProductCategory = (
   id: string,
   options?: UseMutationOptions<