+ item.id === ID}
+ onChange={handleChange}
+ renderValue={item => {
+ if (item.id === ID) {
+ return (
+
+ );
+};
diff --git a/src/routes/collections/collection-create/components/create-collelction-modal/create-collection-modal.tsx b/src/routes/collections/collection-create/components/create-collelction-modal/create-collection-modal.tsx
new file mode 100644
index 00000000..2820aa87
--- /dev/null
+++ b/src/routes/collections/collection-create/components/create-collelction-modal/create-collection-modal.tsx
@@ -0,0 +1,284 @@
+import { FileType } from '@components/common/file-upload';
+import { RouteFocusModal, useRouteModal } from '@components/modals';
+import { KeyboundForm } from '@components/utilities/keybound-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useDocumentDirection } from '@hooks/use-document-direction';
+import { Button, ProgressStatus, ProgressTabs, toast } from '@medusajs/ui';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import zod from 'zod';
+import { CreateCollectionForm } from '../create-collection-form';
+import { useCreateCollection, usePostCollectionDetails } from '@hooks/api';
+import { CreateCollectionRank } from '../create-collection-rank/create-collection-rank';
+import { sdk } from '@lib/client';
+
+export const CreateCollectionSchema = zod.object({
+ title: zod.string().min(1),
+ handle: zod.string().optional(),
+ rank: zod.number().nullable().default(null),
+ media: zod
+ .array(
+ zod.object({
+ id: zod.string(),
+ url: zod.string(),
+ isThumbnail: zod.boolean().optional(),
+ isBanner: zod.boolean().optional(),
+ file: zod.any()
+ })
+ )
+ .default([]),
+ icon: zod
+ .array(
+ zod.object({
+ id: zod.string(),
+ url: zod.string(),
+ file: zod.any()
+ })
+ )
+ .nullable()
+ .default(null)
+});
+
+export type MediaItem = FileType & {
+ isThumbnail?: boolean;
+ isBanner?: boolean;
+};
+
+export type collectionMediaType = {
+ media: MediaItem[];
+ icon: FileType[] | null;
+};
+
+enum Tab {
+ DETAILS = 'details',
+ ORGANIZE = 'organize'
+}
+
+export const CreateCollectionModal = () => {
+ const { t } = useTranslation();
+ const direction = useDocumentDirection();
+ const [activeTab, setActiveTab] = useState
+ {item.title}
+
+ {t('categories.fields.new.label')}
+
+
+ );
+ }
+
+ return item.title;
+ }}
+ />
+
+
+
+
+
+ {t('categories.create.tabs.details')}
+
+
+ {t('categories.create.tabs.organize')}
+
+
+
+
+ Media
+
+
+ {media.length > 0 ? (
+
+ {media.map((i, index) => {
+ const isThumbnail = !!thumbnailId && i.id === thumbnailId
+ const isBanner = !!bannerId && i.id === bannerId
+
+ return (
+
+ ) : (
+
+ 
+
+
+ )
+ })}
+
+ {isThumbnail && (
+
+
+
+
+
+
+
+ )}
+ {isBanner && (
+
+
+
+
+ )}
+
+
+ )}
+
+
+ {t("products.media.emptyState.header")}
+
+
+ Add media to showcase it on the storefront.
+
+
+
+ Icon
+
+ {iconUrl ? (
+
+
+ ) : (
+
+ 
+
+
+
+ )}
+
+
+ No icon yet
+
+
+ Add icon to showcase it near the collection label on the storefront.
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const Canvas = ({ media, curr }: { media: Media[]; curr: number }) => {
+ const { t } = useTranslation();
+
+ if (media.length === 0) {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ {t('products.media.emptyState.header')}
+
+
+ {t('products.media.emptyState.description')}
+
+
+
+
+
+ );
+};
+
+const MAX_VISIBLE_ITEMS = 8;
+
+const Preview = ({
+ media,
+ curr,
+ prev,
+ next,
+ goTo
+}: {
+ media: Media[];
+ curr: number;
+ prev: () => void;
+ next: () => void;
+ goTo: (index: number) => void;
+}) => {
+ if (!media.length) {
+ return null;
+ }
+
+ const getVisibleItems = (media: Media[], index: number) => {
+ if (media.length <= MAX_VISIBLE_ITEMS) {
+ return media;
+ }
+
+ const half = Math.floor(MAX_VISIBLE_ITEMS / 2);
+ const start = (index - half + media.length) % media.length;
+ const end = (start + MAX_VISIBLE_ITEMS) % media.length;
+
+ if (end < start) {
+ return [...media.slice(start), ...media.slice(0, end)];
+ } else {
+ return media.slice(start, end);
+ }
+ };
+
+ const visibleItems = getVisibleItems(media, curr);
+
+ return (
+
+
+
+ 
+
+
+ {media[curr].isThumbnail && (
+
+
+ )}
+ {media[curr].isBanner && (
+
+
+ )}
+
+
+
+
+
+
+
+ );
+};
+
+type Media = {
+ id: string;
+ url: string;
+ isThumbnail?: boolean;
+ isBanner?: boolean;
+};
+
+const getMedia = (
+ images: CollectionDetail['media'],
+ thumbnail: string | null,
+ banner: string | null,
+ icon: string | null
+) => {
+ const media: Media[] =
+ images?.map(image => ({
+ id: image.id,
+ url: image.url,
+ isThumbnail: image.id === thumbnail,
+ isBanner: image.id === banner
+ })) || [];
+
+ if (thumbnail && !media.some(mediaItem => mediaItem.isThumbnail)) {
+ media.unshift({
+ id: 'thumbnail_only',
+ url: thumbnail,
+ isThumbnail: true
+ });
+ }
+
+ if (banner && !media.some(mediaItem => mediaItem.isBanner)) {
+ media.unshift({
+ id: 'banner_only',
+ url: banner,
+ isBanner: true
+ });
+ }
+
+ return media.filter(mediaItem => mediaItem.id !== icon);
+};
diff --git a/src/routes/collections/collection-media/components/collection-media-gallery/index.ts b/src/routes/collections/collection-media/components/collection-media-gallery/index.ts
new file mode 100644
index 00000000..7c9ac947
--- /dev/null
+++ b/src/routes/collections/collection-media/components/collection-media-gallery/index.ts
@@ -0,0 +1 @@
+export * from "./collection-media-gallery"
diff --git a/src/routes/collections/collection-media/components/collection-media-view/collection-media-view-context.tsx b/src/routes/collections/collection-media/components/collection-media-view/collection-media-view-context.tsx
new file mode 100644
index 00000000..3ff62acc
--- /dev/null
+++ b/src/routes/collections/collection-media/components/collection-media-view/collection-media-view-context.tsx
@@ -0,0 +1,9 @@
+import { createContext } from "react"
+
+type CollectionMediaViewContextValue = {
+ goToGallery: () => void
+ goToEdit: () => void
+}
+
+export const CollectionMediaViewContext =
+ createContext
+ {visibleItems.map(item => {
+ const isCurrentImage = item.id === media[curr].id;
+ const originalIndex = media.findIndex(i => i.id === item.id);
+
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+ m.field_id)} strategy={rectSortingStrategy}>
+ {fields.map((m) => {
+ const isBanner = !!bannerId && m.id === bannerId
+
+ return (
+
+
+
+ {activeId ? (
+ m.field_id === activeId)! as any),
+ isBanner: !!bannerId && fields.find((m) => m.field_id === activeId)?.id === bannerId,
+ }}
+ checked={
+ !!selection[fields.find((m) => m.field_id === activeId)!.id!]
+ }
+ />
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+
+ {(media.isThumbnail || media.isBanner) && (
+ 
+
+ )
+}
+
+export const MediaGridItemOverlay = ({
+ media,
+ checked,
+}: {
+ media: MediaField
+ checked: boolean
+}) => {
+ return (
+
+ {media.isThumbnail && (
+
+
+ )}
+ {media.isBanner && (
+
+
+ )}
+
+ )}
+
+
+
+
+ {
+ e.stopPropagation()
+ }}
+ checked={checked}
+ onCheckedChange={handleToggle}
+ />
+
+
+
+ {(media.isThumbnail || media.isBanner) && (
+
+
+ )
+}
+
diff --git a/src/routes/collections/collection-media/components/edit-collection-media-form/index.ts b/src/routes/collections/collection-media/components/edit-collection-media-form/index.ts
new file mode 100644
index 00000000..7c8b50e7
--- /dev/null
+++ b/src/routes/collections/collection-media/components/edit-collection-media-form/index.ts
@@ -0,0 +1 @@
+export { EditCollectionMediaForm } from "./edit-collection-media-form"
diff --git a/src/routes/collections/collection-media/constants.ts b/src/routes/collections/collection-media/constants.ts
new file mode 100644
index 00000000..103c0181
--- /dev/null
+++ b/src/routes/collections/collection-media/constants.ts
@@ -0,0 +1,6 @@
+import { z } from "zod"
+import { MediaSchema } from "@routes/products/product-create/constants"
+
+export const EditCollectionMediaSchema = z.object({
+ media: z.array(MediaSchema),
+ })
\ No newline at end of file
diff --git a/src/routes/collections/collection-media/index.ts b/src/routes/collections/collection-media/index.ts
new file mode 100644
index 00000000..e406335b
--- /dev/null
+++ b/src/routes/collections/collection-media/index.ts
@@ -0,0 +1 @@
+export { CollectionMedia as Component } from "./collection-media"
diff --git a/src/routes/collections/collection-media/types.ts b/src/routes/collections/collection-media/types.ts
new file mode 100644
index 00000000..6e531a47
--- /dev/null
+++ b/src/routes/collections/collection-media/types.ts
@@ -0,0 +1,5 @@
+import { z } from "zod"
+import { EditCollectionMediaSchema } from "@routes/collections/collection-media/constants"
+
+
+export type EditCollectionMediaSchemaType = z.infer
+ {media.isThumbnail &&
+ )}
+
+
+
+
+
+ {Array.from({ length: 10 }).map((_, i) => (
+
+ );
+ }
+
+ return (
+