@lodashventure/medusa-campaign 1.4.1 → 1.4.2

package/src/admin/components/CouponForm.tsx

@@ -0,0 +1,352 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Button,
+  Container,
+  Input,
+  Label,
+  Select,
+  Textarea,
+  toast,
+} from "@medusajs/ui";
+import dayjs from "dayjs";
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+import z from "zod";
+
+const couponSchema = z
+  .object({
+    name: z.string().min(1, "Name is required"),
+    description: z.string().min(1, "Description is required"),
+    type: z.literal("coupon"),
+    code: z.string().min(1, "Coupon code is required"),
+    discount_type: z.enum(["percentage", "fixed"]),
+    discount_value: z.number().positive("Discount must be positive"),
+    currency_code: z.string().optional(),
+    starts_at: z.string().min(1, "Start date is required"),
+    ends_at: z.string().min(1, "End date is required"),
+    allocation: z.enum(["each", "total"]).optional(),
+    target_type: z.enum(["order", "items"]).optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (new Date(data.ends_at) < new Date(data.starts_at)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["ends_at"],
+        message: "End date must be after start date",
+      });
+    }
+
+    if (data.discount_type === "fixed" && !data.currency_code) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["currency_code"],
+        message: "Currency is required for fixed discount",
+      });
+    }
+  });
+
+export type CouponFormData = z.infer<typeof couponSchema>;
+
+interface CouponFormProps {
+  initialData?: Partial<CouponFormData>;
+  onSubmit: (data: CouponFormData) => void;
+  onCancel: () => void;
+  disabled?: boolean;
+}
+
+export const CouponForm: FC<CouponFormProps> = ({
+  initialData,
+  onSubmit,
+  onCancel,
+  disabled = false,
+}) => {
+  const {
+    register,
+    control,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<CouponFormData>({
+    resolver: zodResolver(couponSchema),
+    defaultValues: {
+      name: initialData?.name ?? "",
+      description: initialData?.description ?? "",
+      type: "coupon",
+      code: initialData?.code ?? "",
+      discount_type: initialData?.discount_type ?? "percentage",
+      discount_value: initialData?.discount_value ?? 0,
+      currency_code: initialData?.currency_code ?? "",
+      starts_at:
+        initialData?.starts_at ??
+        dayjs().startOf("day").format("YYYY-MM-DDTHH:mm"),
+      ends_at:
+        initialData?.ends_at ??
+        dayjs().endOf("day").format("YYYY-MM-DDTHH:mm"),
+      allocation: initialData?.allocation ?? "total",
+      target_type: initialData?.target_type ?? "order",
+    },
+  });
+
+  const discountType = watch("discount_type");
+  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: CouponFormData) => {
+    onSubmit(data);
+  };
+
+  const onFormError = () => {
+    const errorMessages = Object.values(errors)
+      .map((err) => err?.message)
+      .filter(Boolean)
+      .join(", ");
+
+    toast.error("Invalid coupon data", {
+      description: errorMessages,
+    });
+  };
+
+  return (
+    <Container>
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-semibold">Coupon</h1>
+        <Button variant="transparent" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+
+      <form
+        onSubmit={handleSubmit(onFormSubmit, onFormError)}
+        className="space-y-6 my-8"
+      >
+        <div className="space-y-2">
+          <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 className="space-y-2">
+          <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 className="space-y-2">
+            <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="flex-1"
+              />
+            </div>
+            {errors.starts_at && (
+              <p className="text-red-500 text-sm mt-1">
+                {errors.starts_at.message}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <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="flex-1"
+              />
+            </div>
+            {errors.ends_at && (
+              <p className="text-red-500 text-sm mt-1">
+                {errors.ends_at.message}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label>Coupon Code</Label>
+            <Input {...register("code")} disabled={disabled} />
+            {errors.code && (
+              <p className="text-red-500 text-sm mt-1">{errors.code.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label>Discount Type</Label>
+            <Controller
+              name="discount_type"
+              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 Amount</Select.Item>
+                  </Select.Content>
+                </Select>
+              )}
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label>Discount Value</Label>
+            <Controller
+              name="discount_value"
+              control={control}
+              render={({ field }) => (
+                <Input
+                  type="number"
+                  value={field.value}
+                  min={0}
+                  step={field.value % 1 === 0 ? 1 : 0.01}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                  disabled={disabled}
+                />
+              )}
+            />
+            {errors.discount_value && (
+              <p className="text-red-500 text-sm mt-1">
+                {errors.discount_value.message}
+              </p>
+            )}
+          </div>
+
+          {discountType === "fixed" && (
+            <div className="space-y-2">
+              <Label>Currency Code</Label>
+              <Input {...register("currency_code")} disabled={disabled} />
+              {errors.currency_code && (
+                <p className="text-red-500 text-sm mt-1">
+                  {errors.currency_code.message}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label>Allocation</Label>
+            <Controller
+              name="allocation"
+              control={control}
+              render={({ field }) => (
+                <Select
+                  value={field.value}
+                  onValueChange={field.onChange}
+                  disabled={disabled}
+                >
+                  <Select.Trigger>
+                    <Select.Value placeholder="Select allocation" />
+                  </Select.Trigger>
+                  <Select.Content>
+                    <Select.Item value="total">Order Total</Select.Item>
+                    <Select.Item value="each">Each Item</Select.Item>
+                  </Select.Content>
+                </Select>
+              )}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Target Type</Label>
+            <Controller
+              name="target_type"
+              control={control}
+              render={({ field }) => (
+                <Select
+                  value={field.value}
+                  onValueChange={field.onChange}
+                  disabled={disabled}
+                >
+                  <Select.Trigger>
+                    <Select.Value placeholder="Select target" />
+                  </Select.Trigger>
+                  <Select.Content>
+                    <Select.Item value="order">Order</Select.Item>
+                    <Select.Item value="items">Items</Select.Item>
+                  </Select.Content>
+                </Select>
+              )}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" type="button" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={disabled}>
+            Save Coupon
+          </Button>
+        </div>
+      </form>
+    </Container>
+  );
+};

package/src/admin/components/CouponPage.tsx

@@ -0,0 +1,104 @@
+import { CampaignDTO, PromotionDTO } 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 { useCoupons } from "../hooks/useCoupons";
+
+type CouponCampaign = CampaignDTO & {
+  promotions?: PromotionDTO[];
+};
+
+const columnHelper = createDataTableColumnHelper<CouponCampaign>();
+
+const useCouponColumns = () =>
+  useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: "Name",
+        cell: (info) => info.getValue(),
+      }),
+      columnHelper.display({
+        id: "code",
+        header: "Code",
+        cell: (info) => info.row.original.promotions?.[0]?.code ?? "-",
+      }),
+      columnHelper.display({
+        id: "status",
+        header: "Status",
+        cell: (info) => {
+          const endsAt = info.row.original.ends_at;
+          if (!endsAt) {
+            return "";
+          }
+
+          const isActive = dayjs(endsAt).isAfter(dayjs());
+          return (
+            <Badge color={isActive ? "green" : "grey"}>
+              {isActive ? "Active" : "Inactive"}
+            </Badge>
+          );
+        },
+      }),
+      columnHelper.accessor("starts_at", {
+        header: "Start Date",
+        cell: (info) =>
+          info.getValue() ? dayjs(info.getValue()).format("YYYY-MM-DD HH:mm") : "",
+      }),
+      columnHelper.accessor("ends_at", {
+        header: "End Date",
+        cell: (info) =>
+          info.getValue() ? dayjs(info.getValue()).format("YYYY-MM-DD HH:mm") : "",
+      }),
+    ],
+    [],
+  );
+
+export const CouponPage = () => {
+  const navigate = useNavigate();
+  const limit = 20;
+  const [pagination, setPagination] = useState<DataTablePaginationState>({
+    pageSize: limit,
+    pageIndex: 0,
+  });
+
+  const offset = pagination.pageIndex * limit;
+
+  const { data } = useCoupons({ limit, offset });
+  const columns = useCouponColumns();
+
+  const table = useDataTable({
+    data: (data?.campaigns as CouponCampaign[]) ?? [],
+    columns,
+    getRowId: (row: CouponCampaign) => row.id,
+    pagination: {
+      state: pagination,
+      onPaginationChange: setPagination,
+    },
+    rowCount: data?.count ?? 0,
+    onRowClick: (_, row) => {
+      navigate(`/coupons/${row.id}`);
+    },
+  });
+
+  return (
+    <Container>
+      <div className="flex justify-between items-center">
+        <h1 className="text-xl font-semibold">Coupons</h1>
+        <Button onClick={() => navigate("/coupons/create")}>Create Coupon</Button>
+      </div>
+      <DataTable instance={table}>
+        <DataTable.Table />
+        <DataTable.Pagination />
+      </DataTable>
+    </Container>
+  );
+};

package/src/admin/components/ProductSelector.tsx

@@ -7,9 +7,8 @@ import {
   Text,
   useDataTable,
 } from "@medusajs/ui";
-import { useQuery } from "@tanstack/react-query";
 import { debounce } from "lodash";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { sdk } from "../lib/sdk";
 
 interface ProductSelectorProps {
@@ -48,18 +47,30 @@ export const ProductSelector = ({
     setSearch(value);
   }, 500);
 
-  const { data: products } = useQuery({
-    queryKey: ["products", selectedProductIds, search],
-    queryFn: () =>
-      sdk.admin.product.list({
-        q: search,
-        limit: 100,
-      }),
-  });
+  const [products, setProducts] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchProducts = async () => {
+      setIsLoading(true);
+      try {
+        const result = await sdk.admin.product.list({
+          q: search,
+          limit: 100,
+        });
+        setProducts(result);
+      } catch (error) {
+        console.error("Failed to fetch products:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchProducts();
+  }, [selectedProductIds, search]);
 
   const selectableProducts = useMemo(() => {
     return products?.products?.filter(
-      (product) => !selectedProductIds.includes(product.id)
+      (product) => !selectedProductIds.includes(product.id),
     );
   }, [products?.products, selectedProductIds]);
 

package/src/admin/hooks/useCouponById.ts

@@ -0,0 +1,36 @@
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export const useCouponById = (id: string) => {
+  const [data, setData] = useState<any | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchCoupon = async () => {
+    if (!id) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await axios.get(`/admin/coupons/${id}`);
+      setData(response.data);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to fetch coupon"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchCoupon();
+  }, [id]);
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchCoupon,
+  };
+};

package/src/admin/hooks/useCoupons.ts

@@ -0,0 +1,46 @@
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export type CouponCampaignResponse = {
+  campaigns: any[];
+  count: number;
+  limit: number;
+  offset: number;
+};
+
+interface Pagination {
+  limit: number;
+  offset: number;
+}
+
+export const useCoupons = ({ limit, offset }: Pagination) => {
+  const [data, setData] = useState<CouponCampaignResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchCoupons = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await axios.get<CouponCampaignResponse>("/admin/coupons", {
+        params: { limit, offset },
+      });
+      setData(response.data);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to fetch coupons"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchCoupons();
+  }, [limit, offset]);
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchCoupons,
+  };
+};

package/src/admin/hooks/useFlashSaleById.ts

@@ -1,21 +1,47 @@
-import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
+import { useEffect, useState } from "react";
 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<
+  const [data, setData] = useState<
+    (CustomCampaign & { products: CampaignProduct[] }) | null
+  >(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchFlashSale = async () => {
+    if (!id) {
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await axios.get<
         CustomCampaign & { products: CampaignProduct[] }
       >(`/admin/flash-sales/${id}`);
-      return data;
-    },
-    enabled: !!id,
-  });
+      setData(response.data);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch flash sale"),
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchFlashSale();
+  }, [id]);
 
-  return query;
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchFlashSale,
+  };
 };