@medusajs/loyalty-plugin 0.0.1

package/.medusa/server/src/admin/routes/gift-card-products/components/gift-card-product-create-form/gift-card-product-create-form-general.js

@@ -0,0 +1,90 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Text, Input, Textarea } from "@medusajs/ui";
+import { Form } from "../../../../components/form.js";
+import { HandleInput } from "../../../../components/handle-input.js";
+const GiftCardProductCreateFormGeneral = ({
+  form
+}) => {
+  return /* @__PURE__ */ jsxs("div", { id: "general", className: "grid grid-cols-1 gap-y-6 md:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          className: "txt-compact-small-plus text-ui-fg-base",
+          weight: "regular",
+          children: "General details"
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { className: "txt-small text-ui-fg-muted", children: "Provide details about the gift card product" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3", children: [
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "title",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { children: [
+              /* @__PURE__ */ jsx(Form.Label, { className: "font-normal", children: "Title" }),
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field, placeholder: "Medusa Gift Card" }) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "subtitle",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { children: [
+              /* @__PURE__ */ jsx(Form.Label, { className: "font-normal", optional: true, children: "Subtitle" }),
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...field,
+                  placeholder: "Gift Card for your friends & family"
+                }
+              ) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "handle",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { children: [
+              /* @__PURE__ */ jsx(Form.Label, { className: "font-normal", optional: true, children: "Handle" }),
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(HandleInput, { ...field, placeholder: "medusa-gift-card" }) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "description",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { children: [
+              /* @__PURE__ */ jsx(Form.Label, { className: "font-normal", optional: true, children: "Description" }),
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  ...field,
+                  placeholder: "Bring joy to your friends and family this holiday season with the Medusa Gift Card"
+                }
+              ) })
+            ] });
+          }
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  GiftCardProductCreateFormGeneral
+};

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

@@ -0,0 +1,288 @@
+import { jsxs, jsx } 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, 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 { DotsSix, ThumbnailBadge, XMark, StackPerspective, Trash } from "@medusajs/icons";
+import { Text, IconButton } from "@medusajs/ui";
+import { useState } from "react";
+import { useFieldArray } from "/Users/oliverjuhl/Desktop/medusa/loyalty-plugin/node_modules/react-hook-form/dist/index.esm.mjs";
+import { ActionMenu } from "../../../../components/action-menu.js";
+import { UploadMediaFormItem } from "../../../../components/upload-media-form-item.js";
+const dropAnimationConfig = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+const GiftCardProductCreateFormMedia = ({
+  form
+}) => {
+  const { fields, append, remove } = 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 getOnDelete = (index) => {
+    return () => {
+      remove(index);
+    };
+  };
+  const getMakeThumbnail = (index) => {
+    return () => {
+      const newFields = fields.map((field, i) => {
+        return {
+          ...field,
+          isThumbnail: i === index
+        };
+      });
+      form.setValue("media", newFields, {
+        shouldDirty: true,
+        shouldTouch: true
+      });
+    };
+  };
+  const getItemHandlers = (index) => {
+    return {
+      onDelete: getOnDelete(index),
+      onMakeThumbnail: getMakeThumbnail(index)
+    };
+  };
+  return /* @__PURE__ */ jsxs("div", { id: "media", className: "grid grid-cols-1 gap-y-6 md:grid-cols-2 pt-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          className: "txt-compact-small-plus text-ui-fg-base",
+          weight: "regular",
+          children: "Images"
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { className: "txt-small text-ui-fg-muted", children: "Upload images to be used as gift card product images" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(UploadMediaFormItem, { form, append, showHint: false }),
+      /* @__PURE__ */ jsxs(
+        DndContext,
+        {
+          sensors,
+          onDragEnd: handleDragEnd,
+          onDragStart: handleDragStart,
+          onDragCancel: handleDragCancel,
+          children: [
+            /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: dropAnimationConfig, children: activeId ? /* @__PURE__ */ jsx(
+              MediaGridItemOverlay,
+              {
+                field: fields.find((m) => m.field_id === activeId)
+              }
+            ) : null }),
+            /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-y-2 mt-2", children: /* @__PURE__ */ jsx(SortableContext, { items: fields.map((field) => field.field_id), children: fields.map((field, index) => {
+              const { onDelete, onMakeThumbnail } = getItemHandlers(index);
+              return /* @__PURE__ */ jsx(
+                MediaItem,
+                {
+                  field,
+                  onDelete,
+                  onMakeThumbnail
+                },
+                field.field_id
+              );
+            }) }) })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const MediaItem = ({ field, onDelete, onMakeThumbnail }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: field.field_id });
+  const style = {
+    opacity: isDragging ? 0.4 : void 0,
+    transform: CSS.Translate.toString(transform),
+    transition
+  };
+  if (!field.file) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
+      ref: setNodeRef,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "transparent",
+              type: "button",
+              size: "small",
+              ...attributes,
+              ...listeners,
+              ref: setActivatorNodeRef,
+              className: "cursor-grab touch-none active:cursor-grabbing",
+              children: /* @__PURE__ */ jsx(DotsSix, { className: "text-ui-fg-muted" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-base h-10 w-[30px] overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(ThumbnailPreview, { url: field.url }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: field.file.name }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+                field.isThumbnail && /* @__PURE__ */ jsx(ThumbnailBadge, {}),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    size: "xsmall",
+                    leading: "compact",
+                    className: "text-ui-fg-subtle",
+                    children: formatFileSize(field.file.size)
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+          /* @__PURE__ */ jsx(
+            ActionMenu,
+            {
+              groups: [
+                {
+                  actions: [
+                    {
+                      label: "Make thumbnail",
+                      icon: /* @__PURE__ */ jsx(StackPerspective, {}),
+                      onClick: onMakeThumbnail
+                    }
+                  ]
+                },
+                {
+                  actions: [
+                    {
+                      icon: /* @__PURE__ */ jsx(Trash, {}),
+                      label: "Delete",
+                      onClick: onDelete
+                    }
+                  ]
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              size: "small",
+              variant: "transparent",
+              onClick: onDelete,
+              children: /* @__PURE__ */ jsx(XMark, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const MediaGridItemOverlay = ({ field }) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs("li", { className: "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          variant: "transparent",
+          size: "small",
+          className: "cursor-grab touch-none active:cursor-grabbing",
+          children: /* @__PURE__ */ jsx(DotsSix, { className: "text-ui-fg-muted" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-base h-10 w-[30px] overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(ThumbnailPreview, { url: field.url }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: (_a = field.file) == null ? void 0 : _a.name }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+            field.isThumbnail && /* @__PURE__ */ jsx(ThumbnailBadge, {}),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "xsmall",
+                leading: "compact",
+                className: "text-ui-fg-subtle",
+                children: formatFileSize(((_b = field.file) == null ? void 0 : _b.size) ?? 0)
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+      /* @__PURE__ */ jsx(ActionMenu, { groups: [] }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          type: "button",
+          size: "small",
+          variant: "transparent",
+          onClick: () => {
+          },
+          children: /* @__PURE__ */ jsx(XMark, {})
+        }
+      )
+    ] })
+  ] });
+};
+const ThumbnailPreview = ({ url }) => {
+  if (!url) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("img", { src: url, alt: "", className: "size-full object-cover object-center" });
+};
+function formatFileSize(bytes, decimalPlaces = 2) {
+  if (bytes === 0) {
+    return "0 Bytes";
+  }
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPlaces)) + " " + sizes[i];
+}
+export {
+  GiftCardProductCreateFormMedia
+};

package/.medusa/server/src/admin/routes/gift-card-products/components/gift-card-product-create-form/gift-card-product-create-form-organize-section.js

@@ -0,0 +1,111 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Text, Button } from "@medusajs/ui";
+import { useFieldArray } from "/Users/oliverjuhl/Desktop/medusa/loyalty-plugin/node_modules/react-hook-form/dist/index.esm.mjs";
+import { Trans } from "/Users/oliverjuhl/Desktop/medusa/loyalty-plugin/node_modules/react-i18next/dist/es/index.js";
+import { ChipGroup } from "../../../../components/chip-group.js";
+import { Form } from "../../../../components/form.js";
+import "../../../../components/modals/route-drawer/route-drawer.js";
+import "../../../../components/modals/route-focus-modal/route-focus-modal.js";
+import "react";
+import "react-router-dom";
+import "../../../../components/modals/route-modal-provider/route-modal-context.js";
+import "../../../../components/modals/stacked-drawer/stacked-drawer.js";
+import { StackedFocusModal } from "../../../../components/modals/stacked-focus-modal/stacked-focus-modal.js";
+import "../../../../components/modals/stacked-modal-provider/stacked-modal-context.js";
+import { useComboboxData } from "../../../../hooks/common/use-combobox-data.js";
+import { sdk } from "../../../../lib/sdk.js";
+const GiftCardProductCreateOrganizationSection = ({
+  form
+}) => {
+  useComboboxData({
+    queryKey: ["product_collections"],
+    queryFn: (params) => sdk.admin.productCollection.list(params),
+    getOptions: (data) => data.collections.map((collection) => ({
+      label: collection.title,
+      value: collection.id
+    }))
+  });
+  useComboboxData({
+    queryKey: ["product_types"],
+    queryFn: (params) => sdk.admin.productType.list(params),
+    getOptions: (data) => data.product_types.map((type) => ({
+      label: type.value,
+      value: type.id
+    }))
+  });
+  useComboboxData({
+    queryKey: ["product_tags"],
+    queryFn: (params) => sdk.admin.productTag.list(params),
+    getOptions: (data) => data.product_tags.map((tag) => ({
+      label: tag.value,
+      value: tag.id
+    }))
+  });
+  useComboboxData({
+    queryKey: ["shipping_profiles"],
+    queryFn: (params) => sdk.admin.shippingProfile.list(params),
+    getOptions: (data) => data.shipping_profiles.map((shippingProfile) => ({
+      label: shippingProfile.name,
+      value: shippingProfile.id
+    }))
+  });
+  const { fields, remove, replace } = useFieldArray({
+    control: form.control,
+    name: "sales_channels",
+    keyName: "key"
+  });
+  const handleClearAllSalesChannels = () => {
+    replace([]);
+  };
+  return /* @__PURE__ */ jsxs("div", { id: "organize", className: "grid grid-cols-1 gap-y-6 md:grid-cols-2 pt-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          className: "txt-compact-small-plus text-ui-fg-base",
+          weight: "regular",
+          children: "Organization"
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { className: "txt-small text-ui-fg-muted", children: "Organize your gift card product" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-4", children: /* @__PURE__ */ jsx(
+      Form.Field,
+      {
+        control: form.control,
+        name: "sales_channels",
+        render: () => {
+          return /* @__PURE__ */ jsxs(Form.Item, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  Form.Label,
+                  {
+                    className: "txt-compact-small-plus font-normal",
+                    optional: true,
+                    tooltip: "This product will only be available in the default sales channel if left untouched",
+                    children: "Sales Channels"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Form.Hint, { children: /* @__PURE__ */ jsx(Trans, { i18nKey: "products.fields.sales_channels.hint" }) })
+              ] }),
+              /* @__PURE__ */ jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Add" }) })
+            ] }),
+            /* @__PURE__ */ jsx(Form.Control, { className: "mt-0", children: fields.length > 0 && /* @__PURE__ */ jsx(
+              ChipGroup,
+              {
+                onClearAll: handleClearAllSalesChannels,
+                onRemove: remove,
+                className: "py-1",
+                children: fields.map((field, index) => /* @__PURE__ */ jsx(ChipGroup.Chip, { index, children: field.name }, field.key))
+              }
+            ) })
+          ] });
+        }
+      }
+    ) })
+  ] });
+};
+export {
+  GiftCardProductCreateOrganizationSection
+};

package/.medusa/server/src/admin/routes/gift-card-products/components/gift-card-product-create-form/gift-card-product-create-form-organize.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "../../../../components/modals/route-drawer/route-drawer.js";
+import "../../../../components/modals/route-focus-modal/route-focus-modal.js";
+import "react";
+import "react-router-dom";
+import "../../../../components/modals/route-modal-provider/route-modal-context.js";
+import "../../../../components/modals/stacked-drawer/stacked-drawer.js";
+import { StackedFocusModal } from "../../../../components/modals/stacked-focus-modal/stacked-focus-modal.js";
+import "../../../../components/modals/stacked-modal-provider/stacked-modal-context.js";
+import { GiftCardProductCreateOrganizationSection } from "./gift-card-product-create-form-organize-section.js";
+import { GiftCardProductSalesChannelStackedModal } from "./gift-card-product-sales-channel-stacked-modal.js";
+import { SC_STACKED_MODAL_ID } from "./schema.js";
+const GiftCardProductCreateOrganizeForm = ({
+  form
+}) => {
+  return /* @__PURE__ */ jsxs(StackedFocusModal, { id: SC_STACKED_MODAL_ID, children: [
+    /* @__PURE__ */ jsx(GiftCardProductCreateOrganizationSection, { form }),
+    /* @__PURE__ */ jsx(GiftCardProductSalesChannelStackedModal, { form })
+  ] });
+};
+export {
+  GiftCardProductCreateOrganizeForm
+};