@medusajs/loyalty-plugin 0.0.1

package/.medusa/server/src/admin/routes/gift-card-products/_id_/media/components/edit-product-media-form/edit-product-media-form.js

@@ -0,0 +1,353 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { defaultDropAnimationSideEffects, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, DragOverlay } from "/Users/oliverjuhl/Desktop/medusa/loyalty-plugin/node_modules/@dnd-kit/core/dist/core.esm.js";
+import { sortableKeyboardCoordinates, SortableContext, rectSortingStrategy, arrayMove, useSortable } from "/Users/oliverjuhl/Desktop/medusa/loyalty-plugin/node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
+import { CSS } from "/Users/oliverjuhl/Desktop/medusa/loyalty-plugin/node_modules/@dnd-kit/utilities/dist/utilities.esm.js";
+import { zodResolver } from "/Users/oliverjuhl/Desktop/medusa/loyalty-plugin/node_modules/@hookform/resolvers/zod/dist/zod.mjs";
+import { ThumbnailBadge } from "@medusajs/icons";
+import { toast, Button, CommandBar, clx, Checkbox, Tooltip } from "@medusajs/ui";
+import { useState, useCallback, Fragment } from "react";
+import { useForm, useFieldArray } from "/Users/oliverjuhl/Desktop/medusa/loyalty-plugin/node_modules/react-hook-form/dist/index.esm.mjs";
+import { Link } from "react-router-dom";
+import { KeyboundForm } from "../../../../../../components/keybound-form.js";
+import "../../../../../../components/modals/route-drawer/route-drawer.js";
+import { RouteFocusModal } from "../../../../../../components/modals/route-focus-modal/route-focus-modal.js";
+import "../../../../../../components/modals/route-modal-provider/route-modal-context.js";
+import { useRouteModal } from "../../../../../../components/modals/route-modal-provider/use-route-modal.js";
+import "../../../../../../components/modals/stacked-drawer/stacked-drawer.js";
+import "../../../../../../components/modals/stacked-focus-modal/stacked-focus-modal.js";
+import "../../../../../../components/modals/stacked-modal-provider/stacked-modal-context.js";
+import { UploadMediaFormItem } from "../../../../../../components/upload-media-form-item.js";
+import { useUpdateProduct } from "../../../../../../hooks/api/products.js";
+import { sdk } from "../../../../../../lib/sdk.js";
+import { EditProductMediaSchema } from "../../../../components/gift-card-product-create-form/schema.js";
+const EditProductMediaForm = ({ product }) => {
+  const [selection, setSelection] = useState({});
+  const { handleSuccess } = useRouteModal();
+  const form = useForm({
+    defaultValues: {
+      media: getDefaultValues(product.images, product.thumbnail)
+    },
+    resolver: zodResolver(EditProductMediaSchema)
+  });
+  const { fields, append, remove, update } = useFieldArray({
+    name: "media",
+    control: form.control,
+    keyName: "field_id"
+  });
+  const [activeId, setActiveId] = useState(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    setActiveId(null);
+    const { active, over } = event;
+    if (active.id !== (over == null ? void 0 : over.id)) {
+      const oldIndex = fields.findIndex((item) => item.field_id === active.id);
+      const newIndex = fields.findIndex((item) => item.field_id === (over == null ? void 0 : over.id));
+      form.setValue("media", arrayMove(fields, oldIndex, newIndex), {
+        shouldDirty: true,
+        shouldTouch: true
+      });
+    }
+  };
+  const handleDragCancel = () => {
+    setActiveId(null);
+  };
+  const { mutateAsync, isPending } = useUpdateProduct(product.id);
+  const handleSubmit = form.handleSubmit(async ({ media }) => {
+    var _a;
+    const filesToUpload = media.map((m, i) => ({ file: m.file, index: i })).filter((m) => !!m.file);
+    let uploaded = [];
+    if (filesToUpload.length) {
+      const { files: uploads } = await sdk.admin.upload.create({ files: filesToUpload.map((m) => m.file) }).catch(() => {
+        form.setError("media", {
+          type: "invalid_file",
+          message: "Failed to upload media"
+        });
+        return { files: [] };
+      });
+      uploaded = uploads;
+    }
+    const withUpdatedUrls = media.map((entry, i) => {
+      var _a2;
+      const toUploadIndex = filesToUpload.findIndex((m) => m.index === i);
+      if (toUploadIndex > -1) {
+        return { ...entry, url: (_a2 = uploaded[toUploadIndex]) == null ? void 0 : _a2.url };
+      }
+      return entry;
+    });
+    const thumbnail = (_a = withUpdatedUrls.find((m) => m.isThumbnail)) == null ? void 0 : _a.url;
+    await mutateAsync(
+      {
+        images: withUpdatedUrls.map((file) => ({ url: file.url, id: file.id })),
+        thumbnail: thumbnail || null
+      },
+      {
+        onSuccess: () => {
+          toast.success("Product media updated");
+          handleSuccess();
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      }
+    );
+  });
+  const handleCheckedChange = useCallback(
+    (id) => {
+      return (val) => {
+        if (!val) {
+          const { [id]: _, ...rest } = selection;
+          setSelection(rest);
+        } else {
+          setSelection((prev) => ({ ...prev, [id]: true }));
+        }
+      };
+    },
+    [selection]
+  );
+  const handleDelete = () => {
+    const ids = Object.keys(selection);
+    const indices = ids.map((id) => fields.findIndex((m) => m.id === id));
+    remove(indices);
+    setSelection({});
+  };
+  const handlePromoteToThumbnail = () => {
+    const ids = Object.keys(selection);
+    if (!ids.length) {
+      return;
+    }
+    const currentThumbnailIndex = fields.findIndex((m) => m.isThumbnail);
+    if (currentThumbnailIndex > -1) {
+      update(currentThumbnailIndex, {
+        ...fields[currentThumbnailIndex],
+        isThumbnail: false
+      });
+    }
+    const index = fields.findIndex((m) => m.id === ids[0]);
+    update(index, {
+      ...fields[index],
+      isThumbnail: true
+    });
+    setSelection({});
+  };
+  const selectionCount = Object.keys(selection).length;
+  return /* @__PURE__ */ jsx(RouteFocusModal.Form, { blockSearchParams: true, form, children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      className: "flex size-full flex-col overflow-hidden",
+      onSubmit: handleSubmit,
+      children: [
+        /* @__PURE__ */ jsx(RouteFocusModal.Header, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-x-2", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", asChild: true, children: /* @__PURE__ */ jsx(Link, { to: { pathname: ".", search: void 0 }, children: "Gallery" }) }) }) }),
+        /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-col overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex size-full flex-col-reverse lg:grid lg:grid-cols-[1fr_560px]", children: [
+          /* @__PURE__ */ jsx(
+            DndContext,
+            {
+              sensors,
+              onDragEnd: handleDragEnd,
+              onDragStart: handleDragStart,
+              onDragCancel: handleDragCancel,
+              children: /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-subtle size-full overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "grid h-fit auto-rows-auto grid-cols-4 gap-6 p-6", children: [
+                /* @__PURE__ */ jsx(
+                  SortableContext,
+                  {
+                    items: fields.map((m) => m.field_id),
+                    strategy: rectSortingStrategy,
+                    children: fields.map((m) => {
+                      return /* @__PURE__ */ jsx(
+                        MediaGridItem,
+                        {
+                          onCheckedChange: handleCheckedChange(m.id),
+                          checked: !!selection[m.id],
+                          media: m
+                        },
+                        m.field_id
+                      );
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: dropAnimationConfig, children: activeId ? /* @__PURE__ */ jsx(
+                  MediaGridItemOverlay,
+                  {
+                    media: fields.find((m) => m.field_id === activeId),
+                    checked: !!selection[fields.find((m) => m.field_id === activeId).id]
+                  }
+                ) : null })
+              ] }) })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-base overflow-auto border-b px-6 py-4 lg:border-b-0 lg:border-l", children: /* @__PURE__ */ jsx(UploadMediaFormItem, { form, append }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(CommandBar, { open: !!selectionCount, children: /* @__PURE__ */ jsxs(CommandBar.Bar, { children: [
+          /* @__PURE__ */ jsxs(CommandBar.Value, { children: [
+            selectionCount,
+            " selected"
+          ] }),
+          /* @__PURE__ */ jsx(CommandBar.Seperator, {}),
+          selectionCount === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              CommandBar.Command,
+              {
+                action: handlePromoteToThumbnail,
+                label: "Make thumbnail",
+                shortcut: "t"
+              }
+            ),
+            /* @__PURE__ */ jsx(CommandBar.Seperator, {})
+          ] }),
+          /* @__PURE__ */ jsx(
+            CommandBar.Command,
+            {
+              action: handleDelete,
+              label: "Delete",
+              shortcut: "d"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+        ] }) })
+      ]
+    }
+  ) });
+};
+const getDefaultValues = (images, thumbnail) => {
+  const media = (images == null ? void 0 : images.map((image) => ({
+    id: image.id,
+    url: image.url,
+    isThumbnail: image.url === thumbnail,
+    file: null
+  }))) || [];
+  if (thumbnail && !media.some((mediaItem) => mediaItem.url === thumbnail)) {
+    const id = Math.random().toString(36).substring(7);
+    media.unshift({
+      id,
+      url: thumbnail,
+      isThumbnail: true,
+      file: null
+    });
+  }
+  return media;
+};
+const dropAnimationConfig = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+const MediaGridItem = ({
+  media,
+  checked,
+  onCheckedChange
+}) => {
+  const handleToggle = useCallback(
+    (value) => {
+      onCheckedChange(value);
+    },
+    [onCheckedChange]
+  );
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: media.field_id });
+  const style = {
+    opacity: isDragging ? 0.4 : void 0,
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clx(
+        "shadow-elevation-card-rest hover:shadow-elevation-card-hover focus-visible:shadow-borders-focus bg-ui-bg-subtle-hover group relative aspect-square h-auto max-w-full overflow-hidden rounded-lg outline-none"
+      ),
+      style,
+      ref: setNodeRef,
+      children: [
+        media.isThumbnail && /* @__PURE__ */ jsx("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsx(Tooltip, { content: "Thumbnail", children: /* @__PURE__ */ jsx(ThumbnailBadge, {}) }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clx("absolute inset-0 cursor-grab touch-none outline-none", {
+              "cursor-grabbing": isDragging
+            }),
+            ref: setActivatorNodeRef,
+            ...attributes,
+            ...listeners
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clx("transition-fg absolute right-2 top-2 opacity-0", {
+              "group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100": !isDragging && !checked,
+              "opacity-100": checked
+            }),
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+                checked,
+                onCheckedChange: handleToggle
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: media.url,
+            alt: "",
+            className: "size-full object-cover object-center"
+          }
+        )
+      ]
+    }
+  );
+};
+const MediaGridItemOverlay = ({
+  media,
+  checked
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "shadow-elevation-card-rest hover:shadow-elevation-card-hover focus-visible:shadow-borders-focus bg-ui-bg-subtle-hover group relative aspect-square h-auto max-w-full cursor-grabbing overflow-hidden rounded-lg outline-none", children: [
+    media.isThumbnail && /* @__PURE__ */ jsx("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsx(ThumbnailBadge, {}) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clx("transition-fg absolute right-2 top-2 opacity-0", {
+          "opacity-100": checked
+        }),
+        children: /* @__PURE__ */ jsx(Checkbox, { checked })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: media.url,
+        alt: "",
+        className: "size-full object-cover object-center"
+      }
+    )
+  ] });
+};
+export {
+  EditProductMediaForm,
+  MediaGridItemOverlay
+};

package/.medusa/server/src/admin/routes/gift-card-products/_id_/media/components/edit-product-media-form/index.js

@@ -0,0 +1,5 @@
+import { EditProductMediaForm, MediaGridItemOverlay } from "./edit-product-media-form.js";
+export {
+  EditProductMediaForm,
+  MediaGridItemOverlay
+};

package/.medusa/server/src/admin/routes/gift-card-products/_id_/media/components/product-media-gallery/index.js

@@ -0,0 +1,4 @@
+import { ProductMediaGallery } from "./product-media-gallery.js";
+export {
+  ProductMediaGallery
+};

package/.medusa/server/src/admin/routes/gift-card-products/_id_/media/components/product-media-gallery/product-media-gallery.js

@@ -0,0 +1,247 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Trash, ArrowDownTray, ThumbnailBadge, TriangleLeftMini, TriangleRightMini } from "@medusajs/icons";
+import { usePrompt, IconButton, Button, Text, Tooltip, clx } from "@medusajs/ui";
+import { useState, useCallback, useEffect } from "react";
+import { useLocation, Link } from "react-router-dom";
+import "../../../../../../components/modals/route-drawer/route-drawer.js";
+import { RouteFocusModal } from "../../../../../../components/modals/route-focus-modal/route-focus-modal.js";
+import "../../../../../../components/modals/route-modal-provider/route-modal-context.js";
+import "../../../../../../components/modals/stacked-drawer/stacked-drawer.js";
+import "../../../../../../components/modals/stacked-focus-modal/stacked-focus-modal.js";
+import "../../../../../../components/modals/stacked-modal-provider/stacked-modal-context.js";
+import { useUpdateProduct } from "../../../../../../hooks/api/products.js";
+const ProductMediaGallery = ({ product }) => {
+  const { state } = useLocation();
+  const [curr, setCurr] = useState((state == null ? void 0 : state.curr) || 0);
+  const prompt = usePrompt();
+  const { mutateAsync, isPending } = useUpdateProduct(product.id);
+  const media = getMedia(product.images, product.thumbnail);
+  const next = useCallback(() => {
+    if (isPending) {
+      return;
+    }
+    setCurr((prev2) => (prev2 + 1) % media.length);
+  }, [media, isPending]);
+  const prev = useCallback(() => {
+    if (isPending) {
+      return;
+    }
+    setCurr((prev2) => (prev2 - 1 + media.length) % media.length);
+  }, [media, isPending]);
+  const goTo = useCallback(
+    (index) => {
+      if (isPending) {
+        return;
+      }
+      setCurr(index);
+    },
+    [isPending]
+  );
+  const handleDownloadCurrent = () => {
+    if (isPending) {
+      return;
+    }
+    const a = document.createElement("a");
+    a.href = media[curr].url;
+    a.download = "image";
+    a.target = "_blank";
+    a.click();
+  };
+  const handleDeleteCurrent = async () => {
+    var _a;
+    const current = media[curr];
+    const res = await prompt({
+      title: "Are you sure?",
+      description: current.isThumbnail ? "This will delete the thumbnail" : "This will delete the image",
+      confirmText: "Delete",
+      cancelText: "Cancel"
+    });
+    if (!res) {
+      return;
+    }
+    const mediaToKeep = ((_a = product.images) == null ? void 0 : _a.filter((i) => i.id !== current.id).map((i) => ({ url: i.url }))) || [];
+    if (curr === media.length - 1) {
+      setCurr((prev2) => prev2 - 1);
+    }
+    await mutateAsync({
+      images: mediaToKeep,
+      thumbnail: current.isThumbnail ? "" : void 0
+    });
+  };
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowRight") {
+        next();
+      } else if (e.key === "ArrowLeft") {
+        prev();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [next, prev]);
+  const noMedia = !media.length;
+  return /* @__PURE__ */ jsxs("div", { className: "flex size-full flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Header, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsxs(
+        IconButton,
+        {
+          size: "small",
+          type: "button",
+          onClick: handleDeleteCurrent,
+          disabled: noMedia,
+          children: [
+            /* @__PURE__ */ jsx(Trash, {}),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Delete image" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        IconButton,
+        {
+          size: "small",
+          type: "button",
+          onClick: handleDownloadCurrent,
+          disabled: noMedia,
+          children: [
+            /* @__PURE__ */ jsx(ArrowDownTray, {}),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Download image" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", asChild: true, children: /* @__PURE__ */ jsx(Link, { to: { pathname: ".", search: "view=edit" }, children: "Edit" }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx(Canvas, { curr, media }),
+      /* @__PURE__ */ jsx(
+        Preview,
+        {
+          curr,
+          media,
+          prev,
+          next,
+          goTo
+        }
+      )
+    ] })
+  ] });
+};
+const Canvas = ({ media, curr }) => {
+  if (media.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle flex size-full flex-col items-center justify-center gap-y-4 pb-8 pt-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "small",
+            leading: "compact",
+            weight: "plus",
+            className: "text-ui-fg-subtle",
+            children: "No images"
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: "Add images to your product" })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx(Link, { to: "?view=edit", children: "Add images" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-subtle relative size-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex size-full items-center justify-center p-6", children: /* @__PURE__ */ jsxs("div", { className: "relative inline-block max-h-full max-w-full", children: [
+    media[curr].isThumbnail && /* @__PURE__ */ jsx("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsx(Tooltip, { content: "Thumbnail", children: /* @__PURE__ */ jsx(ThumbnailBadge, {}) }) }),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: media[curr].url,
+        alt: "",
+        className: "object-fit shadow-elevation-card-rest max-h-[calc(100vh-200px)] w-auto rounded-xl object-contain"
+      }
+    )
+  ] }) }) });
+};
+const MAX_VISIBLE_ITEMS = 8;
+const Preview = ({
+  media,
+  curr,
+  prev,
+  next,
+  goTo
+}) => {
+  if (!media.length) {
+    return null;
+  }
+  const getVisibleItems = (media2, index) => {
+    if (media2.length <= MAX_VISIBLE_ITEMS) {
+      return media2;
+    }
+    const half = Math.floor(MAX_VISIBLE_ITEMS / 2);
+    const start = (index - half + media2.length) % media2.length;
+    const end = (start + MAX_VISIBLE_ITEMS) % media2.length;
+    if (end < start) {
+      return [...media2.slice(start), ...media2.slice(0, end)];
+    } else {
+      return media2.slice(start, end);
+    }
+  };
+  const visibleItems = getVisibleItems(media, curr);
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-center gap-x-2 border-t p-3", children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        variant: "transparent",
+        className: "text-ui-fg-muted",
+        type: "button",
+        onClick: prev,
+        children: /* @__PURE__ */ jsx(TriangleLeftMini, {})
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2", children: visibleItems.map((item) => {
+      const isCurrentImage = item.id === media[curr].id;
+      const originalIndex = media.findIndex((i) => i.id === item.id);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => goTo(originalIndex),
+          className: clx(
+            "transition-fg size-7 overflow-hidden rounded-[4px] outline-none",
+            {
+              "shadow-borders-focus": isCurrentImage
+            }
+          ),
+          children: /* @__PURE__ */ jsx("img", { src: item.url, alt: "", className: "size-full object-cover" })
+        },
+        item.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        variant: "transparent",
+        className: "text-ui-fg-muted",
+        type: "button",
+        onClick: next,
+        children: /* @__PURE__ */ jsx(TriangleRightMini, {})
+      }
+    )
+  ] });
+};
+const getMedia = (images, thumbnail) => {
+  const media = (images == null ? void 0 : images.map((image) => ({
+    id: image.id,
+    url: image.url,
+    isThumbnail: image.url === thumbnail
+  }))) || [];
+  if (thumbnail && !media.some((mediaItem) => mediaItem.isThumbnail)) {
+    media.unshift({
+      id: "thumbnail_only",
+      url: thumbnail,
+      isThumbnail: true
+    });
+  }
+  return media;
+};
+export {
+  ProductMediaGallery
+};

package/.medusa/server/src/admin/routes/gift-card-products/_id_/media/components/product-media-view/index.js

@@ -0,0 +1,4 @@
+import { ProductMediaView } from "./product-media-view.js";
+export {
+  ProductMediaView
+};

package/.medusa/server/src/admin/routes/gift-card-products/_id_/media/components/product-media-view/product-media-view-context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const ProductMediaViewContext = createContext(null);
+export {
+  ProductMediaViewContext
+};

package/.medusa/server/src/admin/routes/gift-card-products/_id_/media/components/product-media-view/product-media-view.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { useSearchParams } from "react-router-dom";
+import { EditProductMediaForm } from "../edit-product-media-form/edit-product-media-form.js";
+import { ProductMediaGallery } from "../product-media-gallery/product-media-gallery.js";
+import { ProductMediaViewContext } from "./product-media-view-context.js";
+const getView = (searchParams) => {
+  const view = searchParams.get("view");
+  if (view === "edit") {
+    return "edit";
+  }
+  return "gallery";
+};
+const ProductMediaView = ({ product }) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const view = getView(searchParams);
+  const handleGoToView = (view2) => {
+    return () => {
+      setSearchParams({ view: view2 });
+    };
+  };
+  return /* @__PURE__ */ jsx(
+    ProductMediaViewContext.Provider,
+    {
+      value: {
+        goToGallery: handleGoToView(
+          "gallery"
+          /* GALLERY */
+        ),
+        goToEdit: handleGoToView(
+          "edit"
+          /* EDIT */
+        )
+      },
+      children: renderView(view, product)
+    }
+  );
+};
+const renderView = (view, product) => {
+  switch (view) {
+    case "gallery":
+      return /* @__PURE__ */ jsx(ProductMediaGallery, { product });
+    case "edit":
+      return /* @__PURE__ */ jsx(EditProductMediaForm, { product });
+  }
+};
+export {
+  ProductMediaView
+};

package/.medusa/server/src/admin/routes/gift-card-products/_id_/media/components/product-media-view/use-product-media-view.js

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { ProductMediaViewContext } from "./product-media-view-context.js";
+const useProductMediaView = () => {
+  const context = useContext(ProductMediaViewContext);
+  if (!context) {
+    throw new Error(
+      "useProductMediaView must be used within a ProductMediaViewProvider"
+    );
+  }
+  return context;
+};
+export {
+  useProductMediaView
+};