@lodashventure/medusa-campaign 1.3.12 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lodashventure/medusa-campaign",
-  "version": "1.3.12",
+  "version": "1.4.0",
   "description": "A starter for Medusa plugins.",
   "author": "Medusa (https://medusajs.com)",
   "license": "MIT",
@@ -26,7 +26,8 @@
   ],
   "scripts": {
     "build": "medusa plugin:build",
-    "dev": "medusa plugin:develop"
+    "dev": "medusa plugin:develop",
+    "prepublishOnly": "medusa plugin:build"
   },
   "devDependencies": {
     "@medusajs/admin-sdk": "2.11.0",
@@ -61,16 +62,16 @@
     "@medusajs/cli": "2.11.0",
     "@medusajs/framework": "2.11.0",
     "@medusajs/icons": "^2.11.0",
+    "@medusajs/js-sdk": "*",
     "@medusajs/medusa": "2.11.0",
     "@medusajs/test-utils": "2.11.0",
     "@medusajs/ui": "^4.0.17",
-    "@medusajs/js-sdk": "*",
-    "@tanstack/react-query": "*",
     "@mikro-orm/cli": "6.4.3",
     "@mikro-orm/core": "6.4.3",
     "@mikro-orm/knex": "6.4.3",
     "@mikro-orm/migrations": "6.4.3",
     "@mikro-orm/postgresql": "6.4.3",
+    "@tanstack/react-query": "*",
     "awilix": "^8.0.1",
     "pg": "^8.13.0"
   },
@@ -81,6 +82,7 @@
     "axios": "^1.12.2",
     "dayjs": "^1.11.13",
     "lodash": "^4.17.21",
+    "multer": "^2.0.2",
     "zod": "^4.1.5"
   }
-}
+}

package/src/admin/components/campaign-detail-form.tsx

@@ -0,0 +1,407 @@
+import { useState, useEffect } from "react";
+import {
+  Container,
+  Heading,
+  Button,
+  Input,
+  Label,
+  toast,
+  clx,
+} from "@medusajs/ui";
+import { PhotoSolid, PencilSquare } from "@medusajs/icons";
+import { MarkdownEditor } from "./markdown-editor";
+import { CampaignImageUploader } from "./campaign-image-uploader";
+
+interface CampaignDetail {
+  id: string;
+  campaign_id: string;
+  image_url?: string | null;
+  image_file_id?: string | null;
+  thumbnail_url?: string | null;
+  thumbnail_file_id?: string | null;
+  detail_content?: string | null;
+  terms_and_conditions?: string | null;
+  meta_title?: string | null;
+  meta_description?: string | null;
+  meta_keywords?: string | null;
+  link_url?: string | null;
+  link_text?: string | null;
+  display_order?: number;
+}
+
+interface CampaignDetailFormProps {
+  campaignId: string;
+  campaignName: string;
+}
+
+export const CampaignDetailForm = ({
+  campaignId,
+  campaignName,
+}: CampaignDetailFormProps) => {
+  const [campaignDetail, setCampaignDetail] = useState<CampaignDetail | null>(
+    null,
+  );
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [showImageUploader, setShowImageUploader] = useState<
+    "image" | "thumbnail" | null
+  >(null);
+
+  const [formData, setFormData] = useState({
+    detail_content: "",
+    terms_and_conditions: "",
+    meta_title: "",
+    meta_description: "",
+    meta_keywords: "",
+    link_url: "",
+    link_text: "",
+    display_order: 0,
+  });
+
+  useEffect(() => {
+    fetchCampaignDetail();
+  }, [campaignId]);
+
+  const fetchCampaignDetail = async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetch(`/admin/campaigns/${campaignId}/detail`, {
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        if (data.campaign_detail) {
+          console.log("Campaign detail loaded:", {
+            image_url: data.campaign_detail.image_url,
+            thumbnail_url: data.campaign_detail.thumbnail_url,
+            decoded_image: data.campaign_detail.image_url
+              ? decodeURIComponent(data.campaign_detail.image_url)
+              : null,
+            decoded_thumbnail: data.campaign_detail.thumbnail_url
+              ? decodeURIComponent(data.campaign_detail.thumbnail_url)
+              : null,
+          });
+          setCampaignDetail(data.campaign_detail);
+          setFormData({
+            detail_content: data.campaign_detail.detail_content || "",
+            terms_and_conditions:
+              data.campaign_detail.terms_and_conditions || "",
+            meta_title: data.campaign_detail.meta_title || "",
+            meta_description: data.campaign_detail.meta_description || "",
+            meta_keywords: data.campaign_detail.meta_keywords || "",
+            link_url: data.campaign_detail.link_url || "",
+            link_text: data.campaign_detail.link_text || "",
+            display_order: data.campaign_detail.display_order || 0,
+          });
+        }
+      } else if (response.status !== 404) {
+        console.error("Failed to fetch campaign detail");
+      }
+    } catch (error) {
+      console.error("Error fetching campaign detail:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const response = await fetch(`/admin/campaigns/${campaignId}/detail`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData),
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setCampaignDetail(data.campaign_detail);
+        toast.success("Campaign details saved successfully");
+      } else {
+        const errorData = await response.json();
+        toast.error(errorData.error || "Failed to save campaign details");
+      }
+    } catch (error) {
+      console.error("Error saving campaign detail:", error);
+      toast.error("Error saving campaign details");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Container>
+        <div className="py-8 text-center">Loading campaign details...</div>
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      <Container className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <Heading level="h2">Campaign Details</Heading>
+            <p className="text-sm text-ui-fg-subtle">{campaignName}</p>
+          </div>
+          <Button onClick={handleSave} isLoading={isSaving}>
+            Save Details
+          </Button>
+        </div>
+
+        {/* Images Section */}
+        <div className="space-y-4">
+          <Heading level="h3">Images</Heading>
+          <div className="grid grid-cols-2 gap-4">
+            {/* Main Image */}
+            <div className="space-y-2">
+              <Label>Main Campaign Image</Label>
+              <div
+                className={clx(
+                  "relative flex h-64 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed",
+                  campaignDetail?.image_url
+                    ? "border-ui-border-base"
+                    : "border-ui-border-base bg-ui-bg-subtle",
+                )}
+              >
+                {campaignDetail?.image_url ? (
+                  <>
+                    <img
+                      src={campaignDetail.image_url}
+                      alt="Campaign"
+                      className="h-full w-full object-cover"
+                      onError={(e) => {
+                        console.error(
+                          "Failed to load image:",
+                          campaignDetail.image_url,
+                        );
+                        e.currentTarget.style.display = "none";
+                      }}
+                    />
+                    <Button
+                      variant="secondary"
+                      size="small"
+                      className="absolute bottom-2 right-2"
+                      onClick={() => setShowImageUploader("image")}
+                    >
+                      <PencilSquare className="mr-1" />
+                      Change
+                    </Button>
+                  </>
+                ) : (
+                  <Button
+                    variant="secondary"
+                    onClick={() => setShowImageUploader("image")}
+                  >
+                    <PhotoSolid className="mr-2" />
+                    Upload Image
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {/* Thumbnail */}
+            <div className="space-y-2">
+              <Label>Thumbnail</Label>
+              <div
+                className={clx(
+                  "relative flex h-64 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed",
+                  campaignDetail?.thumbnail_url
+                    ? "border-ui-border-base"
+                    : "border-ui-border-base bg-ui-bg-subtle",
+                )}
+              >
+                {campaignDetail?.thumbnail_url ? (
+                  <>
+                    <img
+                      src={campaignDetail.thumbnail_url}
+                      alt="Thumbnail"
+                      className="h-full w-full object-cover"
+                      onError={(e) => {
+                        console.error(
+                          "Failed to load thumbnail:",
+                          campaignDetail.thumbnail_url,
+                        );
+                        e.currentTarget.style.display = "none";
+                      }}
+                    />
+                    <Button
+                      variant="secondary"
+                      size="small"
+                      className="absolute bottom-2 right-2"
+                      onClick={() => setShowImageUploader("thumbnail")}
+                    >
+                      <PencilSquare className="mr-1" />
+                      Change
+                    </Button>
+                  </>
+                ) : (
+                  <Button
+                    variant="secondary"
+                    onClick={() => setShowImageUploader("thumbnail")}
+                  >
+                    <PhotoSolid className="mr-2" />
+                    Upload Thumbnail
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Rich Text Content */}
+        <div className="space-y-4">
+          <MarkdownEditor
+            label="Campaign Detail Content"
+            value={formData.detail_content}
+            onChange={(value) =>
+              setFormData({ ...formData, detail_content: value })
+            }
+            placeholder="Enter campaign details in Markdown format. You can include images, links, code blocks, and more..."
+            helpText="Supports Markdown and code syntax"
+            rows={12}
+            showPreview={true}
+          />
+        </div>
+
+        {/* Terms and Conditions */}
+        <div className="space-y-4">
+          <MarkdownEditor
+            label="Terms and Conditions"
+            value={formData.terms_and_conditions}
+            onChange={(value) =>
+              setFormData({ ...formData, terms_and_conditions: value })
+            }
+            placeholder="Enter terms and conditions for this campaign..."
+            helpText="Optional - Campaign specific terms"
+            rows={8}
+            showPreview={true}
+          />
+        </div>
+
+        {/* Link Section */}
+        <div className="space-y-4">
+          <Heading level="h3">Call to Action Link</Heading>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="link-url">Link URL</Label>
+              <Input
+                id="link-url"
+                type="url"
+                value={formData.link_url}
+                onChange={(e) =>
+                  setFormData({ ...formData, link_url: e.target.value })
+                }
+                placeholder="https://example.com/campaign"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="link-text">Link Text</Label>
+              <Input
+                id="link-text"
+                value={formData.link_text}
+                onChange={(e) =>
+                  setFormData({ ...formData, link_text: e.target.value })
+                }
+                placeholder="Shop Now"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* SEO Section */}
+        <div className="space-y-4">
+          <Heading level="h3">SEO & Metadata</Heading>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="meta-title">Meta Title</Label>
+              <Input
+                id="meta-title"
+                value={formData.meta_title}
+                onChange={(e) =>
+                  setFormData({ ...formData, meta_title: e.target.value })
+                }
+                placeholder="Campaign meta title for SEO"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="meta-description">Meta Description</Label>
+              <Input
+                id="meta-description"
+                value={formData.meta_description}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    meta_description: e.target.value,
+                  })
+                }
+                placeholder="Campaign meta description for SEO"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="meta-keywords">Meta Keywords</Label>
+              <Input
+                id="meta-keywords"
+                value={formData.meta_keywords}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    meta_keywords: e.target.value,
+                  })
+                }
+                placeholder="keyword1, keyword2, keyword3"
+              />
+              <p className="text-xs text-ui-fg-subtle">
+                Comma-separated keywords for SEO
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="display-order">Display Order</Label>
+              <Input
+                id="display-order"
+                type="number"
+                value={formData.display_order}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    display_order: parseInt(e.target.value) || 0,
+                  })
+                }
+                placeholder="0"
+              />
+              <p className="text-xs text-ui-fg-subtle">
+                Lower numbers appear first in listings
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-end border-t pt-4">
+          <Button onClick={handleSave} isLoading={isSaving}>
+            Save Campaign Details
+          </Button>
+        </div>
+      </Container>
+
+      {/* Image Uploader Modal */}
+      {showImageUploader && (
+        <CampaignImageUploader
+          campaignId={campaignId}
+          imageType={showImageUploader}
+          currentImageUrl={
+            showImageUploader === "image"
+              ? campaignDetail?.image_url
+              : campaignDetail?.thumbnail_url
+          }
+          onClose={() => setShowImageUploader(null)}
+          onSuccess={fetchCampaignDetail}
+        />
+      )}
+    </>
+  );
+};