@lodashventure/medusa-campaign 1.1.0 → 1.1.2

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;
+};

package/src/admin/lib/sdk.ts

@@ -0,0 +1,10 @@
+// src/admin/lib/sdk.ts
+import Medusa from "@medusajs/js-sdk";
+
+export const sdk = new Medusa({
+  baseUrl: import.meta.env.VITE_BACKEND_URL || "/",
+  debug: import.meta.env.DEV,
+  auth: {
+    type: "session",
+  },
+});

package/src/admin/routes/flash-sales/[id]/page.tsx

@@ -0,0 +1,105 @@
+import { defineRouteConfig } from "@medusajs/admin-sdk";
+import { Sparkles } from "@medusajs/icons";
+import { Button, Container, toast } from "@medusajs/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import { FC, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  CampaignData,
+  CustomCampaign,
+  FlashSaleForm,
+} from "../../../components/FlashSaleForm";
+import { useFlashSaleById } from "../../../hooks/useFlashSaleById";
+
+const FlashSaleDetail: FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { data, isLoading } = useFlashSaleById(id || "");
+
+  const [isEditing, setIsEditing] = useState(false);
+
+  async function handleSubmit(campaignData: CampaignData) {
+    try {
+      await axios.put(`/admin/flash-sales/${id}`, {
+        ...campaignData,
+        starts_at: new Date(campaignData.starts_at).toUTCString(),
+        ends_at: new Date(campaignData.ends_at).toUTCString(),
+      });
+
+      toast.success("Flash sale updated successfully");
+      queryClient.invalidateQueries({
+        exact: false,
+        predicate(query) {
+          return ["flash-sales", "flash-sale"].includes(
+            query.queryKey[0] as string
+          );
+        },
+      });
+      navigate("/flash-sales");
+    } catch (error) {
+      let message: string;
+
+      if (axios.isAxiosError(error)) {
+        console.log(error);
+        message = error.response?.data.message;
+      } else if (error instanceof Error) {
+        message = error.message;
+      } else {
+        message = "Failed to update flash sale";
+      }
+
+      toast.error("Failed to update flash sale", {
+        description: message,
+      });
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <Container className="flex items-center justify-center h-screen">
+        <div className="animate-spin h-10 w-10 border-4 border-primary rounded-full border-t-transparent"></div>
+      </Container>
+    );
+  }
+
+  if (!data) {
+    return (
+      <Container>
+        <p>Flash sale not found</p>
+      </Container>
+    );
+  }
+
+  // Convert campaign data to the format expected by the form
+  const campaignData: CustomCampaign = {
+    name: data.name || "",
+    description: data.description || "",
+    type: "flash-sale",
+    starts_at: data.starts_at,
+    ends_at: data.ends_at,
+  };
+
+  return (
+    <>
+      <FlashSaleForm
+        initialData={campaignData}
+        initialProducts={
+          new Map(data.products.map((product) => [product.product.id, product]))
+        }
+        onSubmit={handleSubmit}
+        onCancel={() => navigate("/flash-sales")}
+        disabled={!isEditing}
+      />
+      <Button onClick={() => setIsEditing((prev) => !prev)}>Toggle Edit</Button>
+    </>
+  );
+};
+
+export const config = defineRouteConfig({
+  label: "Flash Sale Detail",
+  icon: Sparkles,
+});
+
+export default FlashSaleDetail;

package/src/admin/routes/flash-sales/create/page.tsx

@@ -0,0 +1,51 @@
+import { toast } from "@medusajs/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import { FC } from "react";
+import { useNavigate } from "react-router-dom";
+import { CampaignData, FlashSaleForm } from "../../../components/FlashSaleForm";
+
+const FlashSaleCreate: FC = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  async function handleSubmit(campaignData: CampaignData) {
+    try {
+      await axios.post("/admin/flash-sales", {
+        ...campaignData,
+        starts_at: new Date(campaignData.starts_at).toUTCString(),
+        ends_at: new Date(campaignData.ends_at).toUTCString(),
+      });
+      toast.success("Flash sale created successfully");
+      queryClient.invalidateQueries({
+        exact: false,
+        queryKey: ["flash-sales"],
+      });
+      navigate("/flash-sales");
+    } catch (error) {
+      let message: string;
+
+      if (axios.isAxiosError(error)) {
+        console.log(error);
+        message = error.response?.data.message;
+      } else if (error instanceof Error) {
+        message = error.message;
+      } else {
+        message = "Failed to create flash sale";
+      }
+
+      toast.error("Failed to create flash sale", {
+        description: message,
+      });
+    }
+  }
+
+  return (
+    <FlashSaleForm
+      onSubmit={handleSubmit}
+      onCancel={() => navigate("/flash-sales")}
+    />
+  );
+};
+
+export default FlashSaleCreate;

package/src/admin/routes/flash-sales/page.tsx

@@ -0,0 +1,15 @@
+import { defineRouteConfig } from "@medusajs/admin-sdk";
+import { Sparkles } from "@medusajs/icons";
+import { FC } from "react";
+import { FlashSalePage } from "../../components/FlashSalePage";
+
+const FlashSale: FC = () => {
+  return <FlashSalePage />;
+};
+
+export const config = defineRouteConfig({
+  label: "Flash Sale",
+  icon: Sparkles,
+});
+
+export default FlashSale;

package/src/admin/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["."]
+}

package/src/admin/types/campaign.ts

@@ -0,0 +1,25 @@
+export interface Campaign {
+  id: string;
+  name: string;
+  description: string;
+  start_date: string;
+  end_date: string;
+  status: "draft" | "active" | "completed" | "cancelled";
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CampaignFilters {
+  status?: string[];
+  q?: string;
+  start_date?: string;
+  end_date?: string;
+}
+
+export interface CampaignFormValues {
+  name: string;
+  description: string;
+  start_date: string;
+  end_date: string;
+  status: string;
+}

package/src/admin/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/api/README.md

@@ -0,0 +1,133 @@
+# Custom API Routes
+
+An API Route is a REST API endpoint.
+
+An API Route is created in a TypeScript or JavaScript file under the `/src/api` directory of your Medusa application. The file’s name must be `route.ts` or `route.js`.
+
+For example, to create a `GET` API Route at `/store/hello-world`, create the file `src/api/store/hello-world/route.ts` with the following content:
+
+```ts
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http";
+
+export async function GET(req: MedusaRequest, res: MedusaResponse) {
+  res.json({
+    message: "Hello world!",
+  });
+}
+```
+
+## Supported HTTP methods
+
+The file based routing supports the following HTTP methods:
+
+- GET
+- POST
+- PUT
+- PATCH
+- DELETE
+- OPTIONS
+- HEAD
+
+You can define a handler for each of these methods by exporting a function with the name of the method in the paths `route.ts` file.
+
+For example:
+
+```ts
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http";
+
+export async function GET(req: MedusaRequest, res: MedusaResponse) {
+  // Handle GET requests
+}
+
+export async function POST(req: MedusaRequest, res: MedusaResponse) {
+  // Handle POST requests
+}
+
+export async function PUT(req: MedusaRequest, res: MedusaResponse) {
+  // Handle PUT requests
+}
+```
+
+## Parameters
+
+To create an API route that accepts a path parameter, create a directory within the route's path whose name is of the format `[param]`.
+
+For example, if you want to define a route that takes a `productId` parameter, you can do so by creating a file called `/api/products/[productId]/route.ts`:
+
+```ts
+import type {
+  MedusaRequest,
+  MedusaResponse,
+} from "@medusajs/framework/http"
+
+export async function GET(req: MedusaRequest, res: MedusaResponse) {
+  const { productId } = req.params;
+
+  res.json({
+    message: `You're looking for product ${productId}`
+  })
+}
+```
+
+To create an API route that accepts multiple path parameters, create within the file's path multiple directories whose names are of the format `[param]`.
+
+For example, if you want to define a route that takes both a `productId` and a `variantId` parameter, you can do so by creating a file called `/api/products/[productId]/variants/[variantId]/route.ts`.
+
+## Using the container
+
+The Medusa container is available on `req.scope`. Use it to access modules' main services and other registered resources:
+
+```ts
+import type {
+  MedusaRequest,
+  MedusaResponse,
+} from "@medusajs/framework/http"
+
+export const GET = async (
+  req: MedusaRequest,
+  res: MedusaResponse
+) => {
+  const productModuleService = req.scope.resolve("product")
+
+  const [, count] = await productModuleService.listAndCount()
+
+  res.json({
+    count,
+  })
+}
+```
+
+## Middleware
+
+You can apply middleware to your routes by creating a file called `/api/middlewares.ts`. This file must export a configuration object with what middleware you want to apply to which routes.
+
+For example, if you want to apply a custom middleware function to the `/store/custom` route, you can do so by adding the following to your `/api/middlewares.ts` file:
+
+```ts
+import { defineMiddlewares } from "@medusajs/framework/http"
+import type {
+  MedusaRequest,
+  MedusaResponse,
+  MedusaNextFunction,
+} from "@medusajs/framework/http";
+
+async function logger(
+  req: MedusaRequest,
+  res: MedusaResponse,
+  next: MedusaNextFunction
+) {
+  console.log("Request received");
+  next();
+}
+
+export default defineMiddlewares({
+  routes: [
+    {
+      matcher: "/store/custom",
+      middlewares: [logger],
+    },
+  ],
+})
+```
+
+The `matcher` property can be either a string or a regular expression. The `middlewares` property accepts an array of middleware functions.