@lodashventure/medusa-campaign 1.0.0 → 1.1.1

package/.medusa/server/src/workflows/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updatePromotionUsageWorkflow = exports.updateCustomFlashSaleWorkflow = exports.createCustomFlashSaleWorkflow = void 0;
+var createCustomCampaignWorkflow_1 = require("./custom-campaign/createCustomCampaignWorkflow");
+Object.defineProperty(exports, "createCustomFlashSaleWorkflow", { enumerable: true, get: function () { return createCustomCampaignWorkflow_1.createCustomFlashSaleWorkflow; } });
+var updateCustomFlashSaleWorkflow_1 = require("./custom-campaign/updateCustomFlashSaleWorkflow");
+Object.defineProperty(exports, "updateCustomFlashSaleWorkflow", { enumerable: true, get: function () { return updateCustomFlashSaleWorkflow_1.updateCustomFlashSaleWorkflow; } });
+var updatePromotionUsageWorkflow_1 = require("./custom-campaign/updatePromotionUsageWorkflow");
+Object.defineProperty(exports, "updatePromotionUsageWorkflow", { enumerable: true, get: function () { return updatePromotionUsageWorkflow_1.updatePromotionUsageWorkflow; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvd29ya2Zsb3dzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUFBLCtGQUErRjtBQUF0Riw2SUFBQSw2QkFBNkIsT0FBQTtBQUN0QyxpR0FBZ0c7QUFBdkYsOElBQUEsNkJBQTZCLE9BQUE7QUFDdEMsK0ZBQThGO0FBQXJGLDRJQUFBLDRCQUE0QixPQUFBIn0=

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@lodashventure/medusa-campaign",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "A starter for Medusa plugins.",
   "author": "Medusa (https://medusajs.com)",
   "license": "MIT",
   "files": [
-    ".medusa/server"
+    ".medusa/server",
+    "src"
   ],
   "exports": {
     "./package.json": "./package.json",
@@ -25,8 +26,7 @@
   ],
   "scripts": {
     "build": "medusa plugin:build",
-    "dev": "medusa plugin:develop",
-    "prepublishOnly": "medusa plugin:build"
+    "dev": "medusa plugin:develop"
   },
   "devDependencies": {
     "@medusajs/admin-sdk": "2.10.0",

package/src/admin/README.md

@@ -0,0 +1,31 @@
+# Admin Customizations
+
+You can extend the Medusa Admin to add widgets and new pages. Your customizations interact with API routes to provide merchants with custom functionalities.
+
+## Example: Create a Widget
+
+A widget is a React component that can be injected into an existing page in the admin dashboard.
+
+For example, create the file `src/admin/widgets/product-widget.tsx` with the following content:
+
+```tsx title="src/admin/widgets/product-widget.tsx"
+import { defineWidgetConfig } from "@medusajs/admin-sdk"
+
+// The widget
+const ProductWidget = () => {
+  return (
+    <div>
+      <h2>Product Widget</h2>
+    </div>
+  )
+}
+
+// The widget's configurations
+export const config = defineWidgetConfig({
+  zone: "product.details.after",
+})
+
+export default ProductWidget
+```
+
+This inserts a widget with the text “Product Widget” at the end of a product’s details page.

package/src/admin/components/FlashSaleForm.tsx

@@ -0,0 +1,379 @@
+import { Trash } from "@medusajs/icons";
+import {
+  Button,
+  Container,
+  FocusModal,
+  Input,
+  Label,
+  Select,
+  Table,
+  Textarea,
+  toast,
+} from "@medusajs/ui";
+import dayjs from "dayjs";
+import { FC, useState } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import z from "zod";
+import { ProductSelector } from "./ProductSelector";
+
+const customCampaignSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  description: z.string().min(1, "Description is required"),
+  type: z.literal("flash-sale"),
+  starts_at: z.string().min(1, "Start date is required"),
+  ends_at: z.string().min(1, "End date is required"),
+});
+
+export type CustomCampaign = z.infer<typeof customCampaignSchema>;
+
+const campaignProductSchema = z.object({
+  product: z.object({
+    id: z.string(),
+    title: z.string(),
+  }),
+  discountType: z.enum([
+    "percentage",
+    // , "fixed"
+  ]),
+  discountValue: z.number().min(1),
+  limit: z.number().min(1),
+  maxQty: z.number().min(1),
+});
+
+export type CampaignProduct = z.infer<typeof campaignProductSchema>;
+
+export const campaignDataSchema = customCampaignSchema
+  .extend({
+    products: z
+      .array(campaignProductSchema)
+      .min(1, "At least one product is required"),
+  })
+  .refine(
+    (data) => new Date(data.starts_at) < new Date(data.ends_at),
+    "End date must be after start date",
+  );
+
+export type CampaignData = z.infer<typeof campaignDataSchema>;
+
+interface FlashSaleFormProps {
+  initialData?: CustomCampaign;
+  initialProducts?: Map<string, CampaignProduct>;
+  onSubmit: (data: CampaignData) => void;
+  onCancel: () => void;
+  disabled?: boolean;
+}
+
+export const FlashSaleForm: FC<FlashSaleFormProps> = ({
+  initialData,
+  initialProducts,
+  onSubmit,
+  onCancel,
+  disabled = false,
+}) => {
+  const {
+    control,
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<CampaignData>({
+    resolver: zodResolver(campaignDataSchema),
+    defaultValues: {
+      name: initialData?.name || "",
+      description: initialData?.description || "",
+      type: "flash-sale",
+      starts_at: initialData?.starts_at || "",
+      ends_at: initialData?.ends_at || "",
+      products: initialProducts ? Array.from(initialProducts.values()) : [],
+    },
+  });
+
+  const { fields, append, remove, update } = useFieldArray({
+    control,
+    name: "products",
+  });
+
+  const [openProductModal, setOpenProductModal] = useState(false);
+
+  const startsAt = watch("starts_at");
+  const endsAt = watch("ends_at");
+
+  const handleDateTimeChange = (
+    field: "starts_at" | "ends_at",
+    type: "date" | "time",
+    value: string,
+  ) => {
+    const currentValue = watch(field);
+
+    if (type === "date") {
+      const time = currentValue
+        ? dayjs(currentValue).format("HH:mm")
+        : field === "starts_at"
+          ? "00:00"
+          : "23:59";
+      setValue(field, `${value}T${time}`);
+    } else {
+      const date = currentValue
+        ? dayjs(currentValue).format("YYYY-MM-DD")
+        : dayjs().format("YYYY-MM-DD");
+      setValue(field, `${date}T${value}`);
+    }
+  };
+
+  const onFormSubmit = (data: CampaignData) => {
+    onSubmit(data);
+  };
+
+  const onFormError = () => {
+    const errorMessages = Object.entries(errors)
+      .map(([key, value]) => {
+        if (key === "products" && Array.isArray(value)) {
+          return value
+            .map((item, index) =>
+              item
+                ? `Product ${index + 1}: ${Object.values(item).join(", ")}`
+                : "",
+            )
+            .filter(Boolean)
+            .join(", ");
+        }
+        return value?.message || value?.root?.message;
+      })
+      .filter(Boolean)
+      .join(", ");
+
+    toast.error("Invalid data", {
+      description: errorMessages,
+    });
+  };
+
+  return (
+    <Container>
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-semibold">Flash sale campaign</h1>
+        <Button variant="transparent" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+      <form
+        onSubmit={handleSubmit(onFormSubmit, onFormError)}
+        className="space-y-4 my-8"
+      >
+        <div>
+          <Label>Name</Label>
+          <Input {...register("name")} disabled={disabled} />
+          {errors.name && (
+            <p className="text-red-500 text-sm mt-1">{errors.name.message}</p>
+          )}
+        </div>
+
+        <div>
+          <Label>Description</Label>
+          <Textarea {...register("description")} disabled={disabled} />
+          {errors.description && (
+            <p className="text-red-500 text-sm mt-1">
+              {errors.description.message}
+            </p>
+          )}
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <Label>Start Date</Label>
+            <div className="flex gap-2">
+              <Input
+                type="date"
+                value={startsAt ? dayjs(startsAt).format("YYYY-MM-DD") : ""}
+                onChange={(e) =>
+                  handleDateTimeChange("starts_at", "date", e.target.value)
+                }
+                disabled={disabled}
+                className="flex-1"
+              />
+              <Input
+                type="time"
+                value={startsAt ? dayjs(startsAt).format("HH:mm") : ""}
+                onChange={(e) =>
+                  handleDateTimeChange("starts_at", "time", e.target.value)
+                }
+                disabled={disabled}
+                className="w-32"
+              />
+            </div>
+            {errors.starts_at && (
+              <p className="text-red-500 text-sm mt-1">
+                {errors.starts_at.message}
+              </p>
+            )}
+          </div>
+          <div>
+            <Label>End Date</Label>
+            <div className="flex gap-2">
+              <Input
+                type="date"
+                value={endsAt ? dayjs(endsAt).format("YYYY-MM-DD") : ""}
+                onChange={(e) =>
+                  handleDateTimeChange("ends_at", "date", e.target.value)
+                }
+                disabled={disabled}
+                className="flex-1"
+              />
+              <Input
+                type="time"
+                value={endsAt ? dayjs(endsAt).format("HH:mm") : ""}
+                onChange={(e) =>
+                  handleDateTimeChange("ends_at", "time", e.target.value)
+                }
+                disabled={disabled}
+                className="w-32"
+              />
+            </div>
+            {errors.ends_at && (
+              <p className="text-red-500 text-sm mt-1">
+                {errors.ends_at.message}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-between items-center">
+          <Label>Products</Label>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => setOpenProductModal(true)}
+            disabled={disabled}
+          >
+            Add Product
+          </Button>
+        </div>
+
+        {errors.products?.root && (
+          <p className="text-red-500 text-sm">{errors.products.root.message}</p>
+        )}
+
+        <Table>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Product</Table.HeaderCell>
+              <Table.HeaderCell>Discount Type</Table.HeaderCell>
+              <Table.HeaderCell>Discount Value</Table.HeaderCell>
+              <Table.HeaderCell>Limit</Table.HeaderCell>
+              <Table.HeaderCell>Max Qty per Order</Table.HeaderCell>
+              <Table.HeaderCell>Actions</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {fields.map((field, index) => (
+              <Table.Row key={field.id}>
+                <Table.Cell>{field.product.title}</Table.Cell>
+                <Table.Cell>
+                  <Controller
+                    name={`products.${index}.discountType`}
+                    control={control}
+                    render={({ field }) => (
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        disabled={disabled}
+                      >
+                        <Select.Trigger>
+                          <Select.Value placeholder="Select discount type" />
+                        </Select.Trigger>
+                        <Select.Content>
+                          <Select.Item value="percentage">
+                            Percentage
+                          </Select.Item>
+                          {/* <Select.Item value="fixed">Fixed</Select.Item> */}
+                        </Select.Content>
+                      </Select>
+                    )}
+                  />
+                </Table.Cell>
+                <Table.Cell>
+                  <Controller
+                    name={`products.${index}.discountValue`}
+                    control={control}
+                    render={({ field }) => (
+                      <Input
+                        type="number"
+                        value={field.value}
+                        onChange={(e) => field.onChange(Number(e.target.value))}
+                        disabled={disabled}
+                      />
+                    )}
+                  />
+                </Table.Cell>
+                <Table.Cell>
+                  <Controller
+                    name={`products.${index}.limit`}
+                    control={control}
+                    render={({ field }) => (
+                      <Input
+                        type="number"
+                        value={field.value}
+                        onChange={(e) => field.onChange(Number(e.target.value))}
+                        disabled={disabled}
+                      />
+                    )}
+                  />
+                </Table.Cell>
+                <Table.Cell>
+                  <Controller
+                    name={`products.${index}.maxQty`}
+                    control={control}
+                    render={({ field }) => (
+                      <Input
+                        type="number"
+                        value={field.value}
+                        onChange={(e) => field.onChange(Number(e.target.value))}
+                        disabled={disabled}
+                      />
+                    )}
+                  />
+                </Table.Cell>
+                <Table.Cell>
+                  <Button
+                    type="button"
+                    variant="danger"
+                    onClick={() => remove(index)}
+                    disabled={disabled}
+                  >
+                    <Trash />
+                  </Button>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+
+        <Button type="submit" disabled={disabled}>
+          Save
+        </Button>
+      </form>
+
+      <FocusModal open={openProductModal} onOpenChange={setOpenProductModal}>
+        <FocusModal.Content>
+          <FocusModal.Header title="Add Product" />
+          <FocusModal.Body>
+            <ProductSelector
+              selectedProductIds={fields.map((f) => f.product.id)}
+              onSelectProduct={(product) => {
+                append({
+                  product,
+                  discountType: "percentage",
+                  discountValue: 10,
+                  limit: 10,
+                  maxQty: 1,
+                });
+                setOpenProductModal(false);
+              }}
+            />
+          </FocusModal.Body>
+        </FocusModal.Content>
+      </FocusModal>
+    </Container>
+  );
+};

package/src/admin/components/FlashSalePage.tsx

@@ -0,0 +1,113 @@
+import { CampaignDTO } from "@medusajs/framework/types";
+import {
+  Badge,
+  Button,
+  Container,
+  createDataTableColumnHelper,
+  DataTable,
+  DataTablePaginationState,
+  useDataTable,
+} from "@medusajs/ui";
+import dayjs from "dayjs";
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useFlashSales } from "../hooks/useFlashSales";
+
+export const FlashSalePage = () => {
+  const navigate = useNavigate();
+  const limit = 20;
+  const [pagination, setPagination] = useState<DataTablePaginationState>({
+    pageSize: limit,
+    pageIndex: 0,
+  });
+  const offset = useMemo(() => {
+    return pagination.pageIndex * limit;
+  }, [pagination]);
+
+  const columnHelper = createDataTableColumnHelper<CampaignDTO>();
+
+  const columns = [
+    columnHelper.accessor("name", {
+      header: "Name",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("ends_at", {
+      header: "Status",
+      cell: (info) => {
+        const date = info.getValue();
+        if (!date) {
+          return "";
+        }
+        const isActive = dayjs(date).isAfter(dayjs());
+
+        return (
+          <Badge color={isActive ? "green" : "grey"}>
+            {isActive ? "Active" : "Inactive"}
+          </Badge>
+        );
+      },
+    }),
+    columnHelper.accessor("starts_at", {
+      header: "Start Date",
+      cell: (info) => {
+        const date = info.getValue();
+        if (!date) {
+          return "";
+        }
+        return dayjs(date).format("YYYY-MM-DD HH:mm");
+      },
+    }),
+    columnHelper.accessor("ends_at", {
+      header: "End Date",
+      cell: (info) => {
+        const date = info.getValue();
+        if (!date) {
+          return "";
+        }
+        return dayjs(date).format("YYYY-MM-DD HH:mm");
+      },
+    }),
+  ];
+
+  const { data } = useFlashSales({ limit, offset });
+
+  const table = useDataTable({
+    data: data?.campaigns || [],
+    columns,
+    getRowId: (campaign: CampaignDTO) => campaign.id,
+    pagination: {
+      state: pagination,
+      onPaginationChange: setPagination,
+    },
+    rowCount: data?.count || 0,
+    onRowClick: (_, row) => {
+      navigate(`/flash-sales/${row.id}`);
+    },
+  });
+
+  return (
+    <Container>
+      <div className="flex justify-between items-center">
+        <h1 className="text-xl font-semibold">Campaigns</h1>
+        <Button onClick={() => navigate("/flash-sales/create")}>
+          Create Campaign
+        </Button>
+      </div>
+      <DataTable instance={table}>
+        <DataTable.Table />
+        <DataTable.Pagination />
+      </DataTable>
+    </Container>
+  );
+};
+
+// Campaign
+// limit (global)
+// period
+
+// Products
+// limit (per product global)
+//
+
+// promotion
+//

package/src/admin/components/ProductSelector.tsx

@@ -0,0 +1,88 @@
+import { AdminProduct } from "@medusajs/framework/types";
+import {
+  Container,
+  createDataTableColumnHelper,
+  DataTable,
+  Input,
+  Text,
+  useDataTable,
+} from "@medusajs/ui";
+import { useQuery } from "@tanstack/react-query";
+import { debounce } from "lodash";
+import { useMemo, useState } from "react";
+import { sdk } from "../lib/sdk";
+
+interface ProductSelectorProps {
+  selectedProductIds: string[];
+  onSelectProduct?: (product: AdminProduct) => void;
+}
+
+const columnHelper = createDataTableColumnHelper<AdminProduct>();
+
+const columns = [
+  columnHelper.accessor("title", {
+    header: "Title",
+    cell: (info) => (
+      <Text size="large" className="py-2">
+        {info.getValue()}
+      </Text>
+    ),
+  }),
+  columnHelper.accessor("description", {
+    header: "Description",
+    cell: (info) => (
+      <Text size="large" className="py-2">
+        {info.getValue()}
+      </Text>
+    ),
+  }),
+];
+
+export const ProductSelector = ({
+  selectedProductIds,
+  onSelectProduct,
+}: ProductSelectorProps) => {
+  const [search, setSearch] = useState("");
+
+  const debouncedSearchHandler = debounce((value: string) => {
+    setSearch(value);
+  }, 500);
+
+  const { data: products } = useQuery({
+    queryKey: ["products", selectedProductIds, search],
+    queryFn: () =>
+      sdk.admin.product.list({
+        q: search,
+        limit: 100,
+      }),
+  });
+
+  const selectableProducts = useMemo(() => {
+    return products?.products?.filter(
+      (product) => !selectedProductIds.includes(product.id)
+    );
+  }, [products?.products, selectedProductIds]);
+
+  const table = useDataTable({
+    data: selectableProducts || [],
+    columns,
+    getRowId: (product) => product.id,
+    onRowClick: (_, row) => {
+      // @ts-ignore
+      onSelectProduct?.(row.original);
+    },
+  });
+
+  return (
+    <Container>
+      <Input
+        className="text-lg py-2"
+        placeholder="Search products..."
+        onChange={(e) => debouncedSearchHandler(e.target.value)}
+      />
+      <DataTable instance={table}>
+        <DataTable.Table />
+      </DataTable>
+    </Container>
+  );
+};

package/src/admin/hooks/useFlashSaleById.ts

@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { CampaignProduct, CustomCampaign } from "../components/FlashSaleForm";
+
+/**
+ * Hook to fetch a single flash sale by ID
+ */
+export const useFlashSaleById = (id: string) => {
+  const query = useQuery({
+    queryKey: ["flash-sale", id],
+    queryFn: async () => {
+      const { data } = await axios.get<
+        CustomCampaign & { products: CampaignProduct[] }
+      >(`/admin/flash-sales/${id}`);
+      return data;
+    },
+    enabled: !!id,
+  });
+
+  return query;
+};

package/src/admin/hooks/useFlashSales.ts

@@ -0,0 +1,25 @@
+import { CampaignDTO } from "@medusajs/framework/types";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+
+export const useFlashSales = (pagination: {
+  limit: number;
+  offset: number;
+}) => {
+  const query = useQuery({
+    queryKey: ["flash-sales", pagination],
+    queryFn: async () => {
+      const { data } = await axios.get<{
+        campaigns: CampaignDTO[];
+        count: number;
+        limit: number;
+        offset: number;
+      }>("/admin/flash-sales", {
+        params: pagination,
+      });
+      return data;
+    },
+  });
+
+  return query;
+};