@lodashventure/medusa-campaign 1.3.12 → 1.4.0

package/src/admin/widgets/campaign-detail-widget.tsx

@@ -0,0 +1,299 @@
+import { defineWidgetConfig } from "@medusajs/admin-sdk";
+import {
+  Container,
+  Heading,
+  Text,
+  Badge,
+  Button,
+  Alert,
+} from "@medusajs/ui";
+import { Sparkles, PhotoSolid, PencilSquare, Eye } from "@medusajs/icons";
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface CampaignDetail {
+  id: string;
+  campaign_id: string;
+  image_url?: string | null;
+  thumbnail_url?: string | null;
+  detail_content?: string | null;
+  terms_and_conditions?: string | null;
+  meta_title?: string | null;
+  meta_description?: string | null;
+  link_url?: string | null;
+  link_text?: string | null;
+  display_order: number;
+}
+
+interface Campaign {
+  id: string;
+  name: string;
+  description?: string;
+  campaign_budget?: {
+    type: string;
+  };
+}
+
+interface CampaignDetailWidgetProps {
+  data: any; // Promotion data
+}
+
+const CampaignDetailWidget = ({ data: promotion }: CampaignDetailWidgetProps) => {
+  const navigate = useNavigate();
+  const [campaign, setCampaign] = useState<Campaign | null>(null);
+  const [campaignDetail, setCampaignDetail] = useState<CampaignDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (promotion?.campaign_id) {
+      fetchCampaignAndDetail();
+    } else {
+      setLoading(false);
+    }
+  }, [promotion?.campaign_id]);
+
+  const fetchCampaignAndDetail = async () => {
+    if (!promotion?.campaign_id) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Fetch campaign info
+      const campaignResponse = await fetch(
+        `/admin/flash-sales/${promotion.campaign_id}`,
+        {
+          credentials: "include",
+        }
+      );
+
+      if (campaignResponse.ok) {
+        const campaignData = await campaignResponse.json();
+        setCampaign(campaignData);
+
+        // Check if campaign detail exists in response
+        if (campaignData.campaign_detail) {
+          setCampaignDetail(campaignData.campaign_detail);
+        }
+      }
+    } catch (err) {
+      console.error("Error fetching campaign:", err);
+      setError("Failed to load campaign information");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleEditCampaign = () => {
+    if (campaign?.id) {
+      navigate(`/flash-sales/${campaign.id}`);
+    }
+  };
+
+  const handleViewCampaign = () => {
+    if (campaign?.id) {
+      // Navigate to campaign detail tab
+      navigate(`/flash-sales/${campaign.id}#details`);
+    }
+  };
+
+  // Don't show widget if promotion is not part of a campaign
+  if (!promotion?.campaign_id) {
+    return null;
+  }
+
+  if (loading) {
+    return (
+      <Container className="divide-y px-0 pb-0 pt-0">
+        <div className="px-6 py-6">
+          <div className="flex items-center gap-3 mb-4">
+            <Sparkles className="text-ui-fg-subtle" />
+            <Heading level="h2">Campaign</Heading>
+          </div>
+          <Text className="text-ui-fg-subtle">Loading campaign...</Text>
+        </div>
+      </Container>
+    );
+  }
+
+  if (error) {
+    return (
+      <Container className="divide-y px-0 pb-0 pt-0">
+        <div className="px-6 py-6">
+          <div className="flex items-center gap-3 mb-4">
+            <Sparkles className="text-ui-fg-subtle" />
+            <Heading level="h2">Campaign</Heading>
+          </div>
+          <Alert variant="error">{error}</Alert>
+        </div>
+      </Container>
+    );
+  }
+
+  if (!campaign) {
+    return (
+      <Container className="divide-y px-0 pb-0 pt-0">
+        <div className="px-6 py-6">
+          <div className="flex items-center gap-3 mb-4">
+            <Sparkles className="text-ui-fg-subtle" />
+            <Heading level="h2">Campaign</Heading>
+          </div>
+          <Text className="text-ui-fg-subtle">
+            This promotion is not part of a campaign
+          </Text>
+        </div>
+      </Container>
+    );
+  }
+
+  const hasCampaignDetail = !!campaignDetail;
+  const hasImages = campaignDetail?.image_url || campaignDetail?.thumbnail_url;
+  const hasContent = campaignDetail?.detail_content || campaignDetail?.terms_and_conditions;
+  const hasSEO = campaignDetail?.meta_title || campaignDetail?.meta_description;
+
+  return (
+    <Container className="divide-y px-0 pb-0 pt-0">
+      <div className="px-6 py-6">
+        <div className="flex items-center gap-3 mb-4">
+          <Sparkles className="text-ui-fg-subtle" />
+          <Heading level="h2">Campaign</Heading>
+        </div>
+
+        {/* Campaign Info */}
+        <div className="mb-4 p-4 rounded-lg border bg-ui-bg-subtle">
+          <div className="flex items-start justify-between mb-3">
+            <div className="flex-1">
+              <Text className="font-semibold text-lg mb-1">{campaign.name}</Text>
+              {campaign.description && (
+                <Text className="text-sm text-ui-fg-subtle line-clamp-2">
+                  {campaign.description}
+                </Text>
+              )}
+            </div>
+            <Badge color="purple" size="small">
+              <Sparkles className="mr-1" />
+              Campaign
+            </Badge>
+          </div>
+
+          {/* Campaign Detail Status */}
+          <div className="grid grid-cols-2 gap-2 mt-3 pt-3 border-t">
+            <div className="flex items-center gap-2">
+              <PhotoSolid className={`h-4 w-4 ${hasImages ? 'text-green-500' : 'text-ui-fg-muted'}`} />
+              <Text className="text-xs">
+                {hasImages ? 'Images added' : 'No images'}
+              </Text>
+            </div>
+            <div className="flex items-center gap-2">
+              <PencilSquare className={`h-4 w-4 ${hasContent ? 'text-green-500' : 'text-ui-fg-muted'}`} />
+              <Text className="text-xs">
+                {hasContent ? 'Content added' : 'No content'}
+              </Text>
+            </div>
+          </div>
+        </div>
+
+        {/* Campaign Detail Preview */}
+        {hasCampaignDetail && (
+          <div className="space-y-3 mb-4">
+            {campaignDetail.thumbnail_url && (
+              <div>
+                <Text className="text-xs font-medium text-ui-fg-subtle mb-2">
+                  Thumbnail
+                </Text>
+                <img
+                  src={campaignDetail.thumbnail_url}
+                  alt="Campaign thumbnail"
+                  className="w-full h-32 object-cover rounded-lg border"
+                />
+              </div>
+            )}
+
+            {campaignDetail.detail_content && (
+              <div>
+                <Text className="text-xs font-medium text-ui-fg-subtle mb-1">
+                  Content Preview
+                </Text>
+                <Text className="text-sm line-clamp-3 text-ui-fg-muted">
+                  {campaignDetail.detail_content.substring(0, 150)}...
+                </Text>
+              </div>
+            )}
+
+            {campaignDetail.link_url && (
+              <div className="flex items-center gap-2 text-xs">
+                <Badge size="xsmall" color="blue">CTA Link</Badge>
+                <Text className="text-ui-fg-subtle truncate">
+                  {campaignDetail.link_text || campaignDetail.link_url}
+                </Text>
+              </div>
+            )}
+
+            {hasSEO && (
+              <div className="flex items-center gap-2 text-xs">
+                <Badge size="xsmall" color="green">SEO</Badge>
+                <Text className="text-ui-fg-subtle">
+                  Meta fields configured
+                </Text>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* No Campaign Detail Message */}
+        {!hasCampaignDetail && (
+          <Alert variant="info" className="mb-4">
+            <Text className="text-sm">
+              No campaign details added yet. Add images, content, and SEO to enhance this campaign.
+            </Text>
+          </Alert>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-2">
+          <Button
+            variant="secondary"
+            size="small"
+            onClick={handleEditCampaign}
+          >
+            <PencilSquare className="mr-1" />
+            Edit Campaign
+          </Button>
+          {hasCampaignDetail && (
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={handleViewCampaign}
+            >
+              <Eye className="mr-1" />
+              View Details
+            </Button>
+          )}
+        </div>
+
+        {/* Quick Stats */}
+        {campaignDetail && (
+          <div className="mt-4 pt-4 border-t grid grid-cols-2 gap-3 text-xs">
+            <div>
+              <Text className="text-ui-fg-subtle">Display Order</Text>
+              <Text className="font-medium">{campaignDetail.display_order}</Text>
+            </div>
+            <div>
+              <Text className="text-ui-fg-subtle">Status</Text>
+              <Badge color={hasCampaignDetail ? "green" : "grey"} size="xsmall">
+                {hasCampaignDetail ? "Complete" : "Incomplete"}
+              </Badge>
+            </div>
+          </div>
+        )}
+      </div>
+    </Container>
+  );
+};
+
+export const config = defineWidgetConfig({
+  zone: "promotion.details.side.after",
+});
+
+export default CampaignDetailWidget;

package/src/admin/widgets/campaign-stats-widget.tsx

@@ -0,0 +1,238 @@
+import { defineWidgetConfig } from "@medusajs/admin-sdk";
+import { Container, Heading, Text, Badge } from "@medusajs/ui";
+import {
+  Sparkles,
+  PhotoSolid,
+  CheckCircleSolid,
+  ClockSolid,
+} from "@medusajs/icons";
+import { useState, useEffect } from "react";
+
+interface CampaignStats {
+  total: number;
+  active: number;
+  inactive: number;
+  with_images: number;
+  with_content: number;
+  complete: number;
+}
+
+const CampaignStatsWidget = () => {
+  const [stats, setStats] = useState<CampaignStats>({
+    total: 0,
+    active: 0,
+    inactive: 0,
+    with_images: 0,
+    with_content: 0,
+    complete: 0,
+  });
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchStats();
+  }, []);
+
+  const fetchStats = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch("/admin/flash-sales?limit=100", {
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        const campaigns = data.campaigns || [];
+
+        // Calculate stats
+        const now = new Date();
+        let active = 0;
+        let inactive = 0;
+        let withImages = 0;
+        let withContent = 0;
+        let complete = 0;
+
+        campaigns.forEach((campaign: any) => {
+          // Count active/inactive
+          if (campaign.ends_at && new Date(campaign.ends_at) > now) {
+            active++;
+          } else {
+            inactive++;
+          }
+
+          // Count campaigns with details
+          if (campaign.campaign_detail) {
+            if (
+              campaign.campaign_detail.image_url ||
+              campaign.campaign_detail.thumbnail_url
+            ) {
+              withImages++;
+            }
+            if (campaign.campaign_detail.detail_content) {
+              withContent++;
+            }
+            // Complete = has both images and content
+            if (
+              (campaign.campaign_detail.image_url ||
+                campaign.campaign_detail.thumbnail_url) &&
+              campaign.campaign_detail.detail_content
+            ) {
+              complete++;
+            }
+          }
+        });
+
+        setStats({
+          total: campaigns.length,
+          active,
+          inactive,
+          with_images: withImages,
+          with_content: withContent,
+          complete,
+        });
+      }
+    } catch (err) {
+      console.error("Error fetching campaign stats:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Container className="px-6 py-6">
+        <div className="flex items-center gap-3 mb-4">
+          <Sparkles className="text-ui-fg-subtle" />
+          <Heading level="h2">Campaign Overview</Heading>
+        </div>
+        <Text className="text-ui-fg-subtle">Loading stats...</Text>
+      </Container>
+    );
+  }
+
+  const completionRate =
+    stats.total > 0 ? Math.round((stats.complete / stats.total) * 100) : 0;
+
+  return (
+    <Container className="px-6 py-6">
+      <div className="flex items-center gap-3 mb-6">
+        <Sparkles className="text-ui-fg-subtle" />
+        <Heading level="h2">Campaign Overview</Heading>
+      </div>
+
+      {/* Main Stats Grid */}
+      <div className="grid grid-cols-3 gap-4 mb-6">
+        {/* Total Campaigns */}
+        <div className="p-4 rounded-lg border bg-ui-bg-subtle">
+          <div className="flex items-center justify-between mb-2">
+            <Text className="text-xs text-ui-fg-subtle">Total</Text>
+            <Sparkles className="h-4 w-4 text-ui-fg-subtle" />
+          </div>
+          <Text className="text-2xl font-bold">{stats.total}</Text>
+        </div>
+
+        {/* Active Campaigns */}
+        <div className="p-4 rounded-lg border bg-green-50">
+          <div className="flex items-center justify-between mb-2">
+            <Text className="text-xs text-green-700">Active</Text>
+            <CheckCircleSolid className="h-4 w-4 text-green-600" />
+          </div>
+          <Text className="text-2xl font-bold text-green-700">
+            {stats.active}
+          </Text>
+        </div>
+
+        {/* Inactive Campaigns */}
+        <div className="p-4 rounded-lg border bg-gray-50">
+          <div className="flex items-center justify-between mb-2">
+            <Text className="text-xs text-gray-600">Inactive</Text>
+            <ClockSolid className="h-4 w-4 text-gray-500" />
+          </div>
+          <Text className="text-2xl font-bold text-gray-600">
+            {stats.inactive}
+          </Text>
+        </div>
+      </div>
+
+      {/* Detail Stats */}
+      <div className="space-y-3 mb-6">
+        <div className="flex items-center justify-between p-3 rounded-lg bg-ui-bg-subtle">
+          <div className="flex items-center gap-2">
+            <PhotoSolid className="h-4 w-4 text-blue-600" />
+            <Text className="text-sm">With Images</Text>
+          </div>
+          <div className="flex items-center gap-2">
+            <Text className="text-sm font-medium">{stats.with_images}</Text>
+            <Badge size="xsmall" color="blue">
+              {stats.total > 0
+                ? Math.round((stats.with_images / stats.total) * 100)
+                : 0}
+              %
+            </Badge>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between p-3 rounded-lg bg-ui-bg-subtle">
+          <div className="flex items-center gap-2">
+            <CheckCircleSolid className="h-4 w-4 text-green-600" />
+            <Text className="text-sm">With Content</Text>
+          </div>
+          <div className="flex items-center gap-2">
+            <Text className="text-sm font-medium">{stats.with_content}</Text>
+            <Badge size="xsmall" color="green">
+              {stats.total > 0
+                ? Math.round((stats.with_content / stats.total) * 100)
+                : 0}
+              %
+            </Badge>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between p-3 rounded-lg bg-ui-bg-subtle">
+          <div className="flex items-center gap-2">
+            <Sparkles className="h-4 w-4 text-purple-600" />
+            <Text className="text-sm">Complete Details</Text>
+          </div>
+          <div className="flex items-center gap-2">
+            <Text className="text-sm font-medium">{stats.complete}</Text>
+            <Badge size="xsmall" color="purple">
+              {completionRate}%
+            </Badge>
+          </div>
+        </div>
+      </div>
+
+      {/* Completion Progress Bar */}
+      <div className="pt-4 border-t">
+        <div className="flex items-center justify-between mb-2">
+          <Text className="text-xs text-ui-fg-subtle">Campaign Completion</Text>
+          <Text className="text-xs font-medium">{completionRate}%</Text>
+        </div>
+        <div className="h-2 bg-ui-bg-subtle rounded-full overflow-hidden">
+          <div
+            className="h-full bg-gradient-to-r from-purple-500 to-blue-500 transition-all duration-300"
+            style={{ width: `${completionRate}%` }}
+          />
+        </div>
+        <Text className="text-xs text-ui-fg-muted mt-2">
+          {stats.complete} of {stats.total} campaigns have complete details
+        </Text>
+      </div>
+
+      {/* Quick Tip */}
+      {completionRate < 50 && stats.total > 0 && (
+        <div className="mt-4 p-3 rounded-lg bg-blue-50 border border-blue-200">
+          <Text className="text-xs text-blue-800">
+            💡 Tip: Add images and content to campaigns to improve customer
+            engagement!
+          </Text>
+        </div>
+      )}
+    </Container>
+  );
+};
+
+export const config = defineWidgetConfig({
+  zone: "campaign.list.before",
+});
+
+export default CampaignStatsWidget;

package/src/api/admin/campaigns/[id]/detail/route.ts

@@ -0,0 +1,77 @@
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http";
+import { ContainerRegistrationKeys } from "@medusajs/framework/utils";
+import z from "zod";
+import { updateCampaignDetailWorkflow } from "../../../../../workflows/campaign-detail/update-campaign-detail";
+import { CUSTOM_CAMPAIGN_MODULE } from "../../../../../modules/custom-campaigns";
+import CustomCampaignModuleService from "../../../../../modules/custom-campaigns/service";
+
+export const updateCampaignDetailSchema = z.object({
+  detail_content: z.string().optional(),
+  terms_and_conditions: z.string().optional(),
+  meta_title: z.string().optional(),
+  meta_description: z.string().optional(),
+  meta_keywords: z.string().optional(),
+  link_url: z.string().url().optional().or(z.literal("")),
+  link_text: z.string().optional(),
+  display_order: z.number().optional(),
+});
+
+export type UpdateCampaignDetailInput = z.infer<
+  typeof updateCampaignDetailSchema
+>;
+
+// GET campaign detail
+export const GET = async (req: MedusaRequest, res: MedusaResponse) => {
+  const { id: campaign_id } = req.params;
+  const customCampaignModuleService =
+    req.scope.resolve<CustomCampaignModuleService>(CUSTOM_CAMPAIGN_MODULE);
+
+  try {
+    const [campaignDetail] =
+      await customCampaignModuleService.listCampaignDetails({
+        campaign_id,
+      });
+
+    if (!campaignDetail) {
+      return res.status(404).json({
+        error: "Campaign detail not found",
+      });
+    }
+
+    res.status(200).json({ campaign_detail: campaignDetail });
+  } catch (error) {
+    console.error("Error fetching campaign detail:", error);
+    res.status(500).json({
+      error: "Failed to fetch campaign detail",
+      details: error instanceof Error ? error.message : String(error),
+    });
+  }
+};
+
+// PUT/POST update or create campaign detail
+export const POST = async (
+  req: MedusaRequest<UpdateCampaignDetailInput>,
+  res: MedusaResponse,
+) => {
+  const { id: campaign_id } = req.params;
+  const body = updateCampaignDetailSchema.parse(req.body);
+
+  try {
+    const { result } = await updateCampaignDetailWorkflow(req.scope).run({
+      input: {
+        campaign_id,
+        ...body,
+      },
+    });
+
+    res.status(200).json({ campaign_detail: result });
+  } catch (error) {
+    console.error("Error updating campaign detail:", error);
+    res.status(500).json({
+      error: "Failed to update campaign detail",
+      details: error instanceof Error ? error.message : String(error),
+    });
+  }
+};
+
+export const PUT = POST;

package/src/api/admin/campaigns/[id]/image/route.ts

@@ -0,0 +1,87 @@
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http";
+import { uploadCampaignImagesWorkflow } from "../../../../../workflows/campaign-detail/upload-campaign-images";
+import { deleteFilesWorkflow } from "@medusajs/medusa/core-flows";
+import { CUSTOM_CAMPAIGN_MODULE } from "../../../../../modules/custom-campaigns";
+import CustomCampaignModuleService from "../../../../../modules/custom-campaigns/service";
+
+// POST upload campaign image
+export const POST = async (req: MedusaRequest, res: MedusaResponse) => {
+  const { id: campaign_id } = req.params;
+  const file = (req as any).file;
+
+  if (!file) {
+    return res.status(400).json({
+      error: "No file provided",
+    });
+  }
+
+  try {
+    const { result } = await uploadCampaignImagesWorkflow(req.scope).run({
+      input: {
+        campaign_id,
+        files: [
+          {
+            filename: Buffer.from(file.originalname, "latin1").toString("utf8"),
+            mimeType: file.mimetype,
+            content: file.buffer.toString("binary"),
+            access: "public" as const,
+          },
+        ],
+        image_type: "image",
+      },
+    });
+
+    res.status(200).json({ campaign_detail: result });
+  } catch (error) {
+    console.error("Error uploading campaign image:", error);
+    res.status(500).json({
+      error: "Failed to upload campaign image",
+      details: error instanceof Error ? error.message : String(error),
+    });
+  }
+};
+
+// DELETE campaign image
+export const DELETE = async (req: MedusaRequest, res: MedusaResponse) => {
+  const { id: campaign_id } = req.params;
+  const customCampaignModuleService =
+    req.scope.resolve<CustomCampaignModuleService>(CUSTOM_CAMPAIGN_MODULE);
+
+  try {
+    const [campaignDetail] =
+      await customCampaignModuleService.listCampaignDetails({
+        campaign_id,
+      });
+
+    if (!campaignDetail || !campaignDetail.image_file_id) {
+      return res.status(404).json({
+        error: "Campaign image not found",
+      });
+    }
+
+    // Delete file
+    await deleteFilesWorkflow(req.scope).run({
+      input: {
+        ids: [campaignDetail.image_file_id],
+      },
+    });
+
+    // Update campaign detail
+    const [updatedDetail] =
+      await customCampaignModuleService.updateCampaignDetails([
+        {
+          id: campaignDetail.id,
+          image_url: null,
+          image_file_id: null,
+        },
+      ]);
+
+    res.status(200).json({ campaign_detail: updatedDetail });
+  } catch (error) {
+    console.error("Error deleting campaign image:", error);
+    res.status(500).json({
+      error: "Failed to delete campaign image",
+      details: error instanceof Error ? error.message : String(error),
+    });
+  }
+};