@lodashventure/medusa-campaign 1.3.12 → 1.4.0

package/src/admin/components/campaign-image-uploader.tsx

@@ -0,0 +1,313 @@
+import { useState, useCallback } from "react";
+import {
+  PhotoSolid,
+  Trash,
+  CloudArrowUp,
+  X,
+} from "@medusajs/icons";
+import { Button, Heading, Text, Alert, clx } from "@medusajs/ui";
+
+interface CampaignImageUploaderProps {
+  campaignId: string;
+  imageType: "image" | "thumbnail";
+  currentImageUrl?: string | null;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export const CampaignImageUploader = ({
+  campaignId,
+  imageType,
+  currentImageUrl,
+  onClose,
+  onSuccess,
+}: CampaignImageUploaderProps) => {
+  const [displayImage, setDisplayImage] = useState(currentImageUrl || null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  const isThumbnail = imageType === "thumbnail";
+  const maxSize = 5; // 5MB for images
+  const allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+
+  const formatFileTypes = () => {
+    return "JPEG, PNG, GIF, or WebP";
+  };
+
+  const validateFile = (file: File): boolean => {
+    if (!allowedTypes.includes(file.type)) {
+      setError(`Please upload a valid image file (${formatFileTypes()})`);
+      return false;
+    }
+    if (file.size > maxSize * 1024 * 1024) {
+      setError(`File size must be less than ${maxSize}MB`);
+      return false;
+    }
+    return true;
+  };
+
+  const handleFileUpload = async (file: File) => {
+    if (!validateFile(file)) return;
+
+    setError(null);
+
+    // Show preview immediately
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setPreviewUrl(reader.result as string);
+    };
+    reader.readAsDataURL(file);
+
+    // Upload to server
+    setIsUploading(true);
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const response = await fetch(
+        `/admin/campaigns/${campaignId}/${imageType}`,
+        {
+          method: "POST",
+          body: formData,
+          credentials: "include",
+        }
+      );
+
+      if (response.ok) {
+        const result = await response.json();
+        const newImageUrl =
+          imageType === "image"
+            ? result.campaign_detail?.image_url
+            : result.campaign_detail?.thumbnail_url;
+        setDisplayImage(newImageUrl);
+        setPreviewUrl(null);
+
+        // Call onSuccess callback if provided
+        onSuccess?.();
+
+        // Show success for a moment before closing
+        setTimeout(() => {
+          onClose();
+        }, 1000);
+      } else {
+        const errorData = await response.json();
+        setError(errorData.error || `Failed to upload ${imageType}`);
+        setPreviewUrl(null);
+      }
+    } catch (err) {
+      setError(`Error uploading ${imageType}`);
+      setPreviewUrl(null);
+      console.error(`Error uploading ${imageType}:`, err);
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!confirm(`Are you sure you want to delete the ${imageType}?`)) return;
+
+    setIsUploading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(
+        `/admin/campaigns/${campaignId}/${imageType}`,
+        {
+          method: "DELETE",
+          credentials: "include",
+        }
+      );
+
+      if (response.ok) {
+        setDisplayImage(null);
+        setPreviewUrl(null);
+
+        // Call onSuccess callback if provided
+        onSuccess?.();
+
+        setTimeout(() => {
+          onClose();
+        }, 500);
+      } else {
+        const errorData = await response.json();
+        setError(errorData.error || `Failed to delete ${imageType}`);
+      }
+    } catch (err) {
+      setError(`Error deleting ${imageType}`);
+      console.error(`Error deleting ${imageType}:`, err);
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
+      handleFileUpload(file);
+    }
+  }, []);
+
+  const imageToDisplay = previewUrl || displayImage;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="w-full max-w-2xl rounded-lg bg-ui-bg-base p-6">
+        <div className="mb-6 flex items-center justify-between">
+          <div>
+            <Heading level="h2">
+              Upload Campaign {isThumbnail ? "Thumbnail" : "Image"}
+            </Heading>
+            <Text className="text-ui-fg-subtle">
+              {isThumbnail
+                ? "Thumbnail for campaign listing"
+                : "Main campaign image"}
+            </Text>
+          </div>
+          <Button variant="secondary" size="small" onClick={onClose}>
+            <X />
+          </Button>
+        </div>
+
+        {error && (
+          <Alert variant="error" dismissible className="mb-4">
+            {error}
+          </Alert>
+        )}
+
+        <div className="space-y-4">
+          {imageToDisplay ? (
+            <div className="space-y-4">
+              <div className="relative overflow-hidden rounded-lg border border-ui-border-base bg-ui-bg-subtle">
+                <img
+                  src={imageToDisplay}
+                  alt={`Campaign ${imageType}`}
+                  className={clx(
+                    "w-full object-contain",
+                    isThumbnail ? "h-32" : "h-64"
+                  )}
+                />
+                {isUploading && (
+                  <div className="absolute inset-0 flex items-center justify-center bg-black/50">
+                    <div className="text-white">Uploading...</div>
+                  </div>
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="secondary"
+                  disabled={isUploading}
+                  onClick={() =>
+                    document.getElementById(`${imageType}-file-input`)?.click()
+                  }
+                >
+                  <CloudArrowUp className="mr-2" />
+                  Replace
+                </Button>
+                <Button
+                  variant="danger"
+                  disabled={isUploading}
+                  onClick={handleDelete}
+                >
+                  <Trash className="mr-2" />
+                  Delete
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div
+              className={clx(
+                "flex flex-col items-center justify-center rounded-lg border-2 border-dashed transition-colors",
+                isThumbnail ? "h-48" : "h-64",
+                isDragging
+                  ? "border-ui-border-interactive bg-ui-bg-highlight"
+                  : "border-ui-border-base bg-ui-bg-subtle",
+                !isUploading && "cursor-pointer"
+              )}
+              onDragEnter={handleDragEnter}
+              onDragLeave={handleDragLeave}
+              onDragOver={handleDragOver}
+              onDrop={handleDrop}
+              onClick={() =>
+                !isUploading &&
+                document.getElementById(`${imageType}-file-input`)?.click()
+              }
+            >
+              <PhotoSolid className="mb-4 h-12 w-12 text-ui-fg-subtle" />
+              <Text className="mb-2 text-lg font-medium">
+                {isDragging
+                  ? `Drop ${imageType} here`
+                  : `Upload ${isThumbnail ? "Thumbnail" : "Image"}`}
+              </Text>
+              <Text className="mb-4 text-center text-ui-fg-subtle">
+                Drag and drop an image here, or click to select
+              </Text>
+              <Text className="text-sm text-ui-fg-subtle">
+                {formatFileTypes()} • Max {maxSize}MB
+              </Text>
+              {isThumbnail && (
+                <Text className="mt-2 text-xs text-ui-fg-subtle">
+                  Recommended: 16:9 aspect ratio, minimum 400x225px
+                </Text>
+              )}
+              {!isThumbnail && (
+                <Text className="mt-2 text-xs text-ui-fg-subtle">
+                  Recommended: High resolution, minimum 1200x600px
+                </Text>
+              )}
+              {isUploading && (
+                <div className="mt-4">
+                  <Text>Uploading...</Text>
+                </div>
+              )}
+            </div>
+          )}
+          <input
+            id={`${imageType}-file-input`}
+            type="file"
+            accept={allowedTypes.join(",")}
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              if (file) handleFileUpload(file);
+              e.target.value = ""; // Reset input
+            }}
+            className="hidden"
+          />
+        </div>
+
+        <div className="mt-6 flex items-center justify-between border-t pt-4">
+          <Text className="text-sm text-ui-fg-subtle">
+            {isThumbnail
+              ? "Thumbnail will be displayed in campaign listings"
+              : "Main image for the campaign detail page"}
+          </Text>
+          <Button variant="secondary" onClick={onClose}>
+            Close
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/admin/components/markdown-editor.tsx

@@ -0,0 +1,298 @@
+import { useState } from "react";
+import { Label, Textarea, Button, Tabs, clx } from "@medusajs/ui";
+import { CommandLine, InformationCircle } from "@medusajs/icons";
+
+interface MarkdownEditorProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  helpText?: string;
+  rows?: number;
+  showPreview?: boolean;
+}
+
+export const MarkdownEditor = ({
+  label,
+  value,
+  onChange,
+  placeholder,
+  helpText,
+  rows = 10,
+  showPreview = true,
+}: MarkdownEditorProps) => {
+  const [activeTab, setActiveTab] = useState<"write" | "preview">("write");
+
+  const insertMarkdown = (before: string, after: string = "") => {
+    const textarea = document.getElementById(
+      `markdown-${label}`,
+    ) as HTMLTextAreaElement;
+    if (!textarea) return;
+
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const selectedText = value.substring(start, end);
+    const newText =
+      value.substring(0, start) +
+      before +
+      selectedText +
+      after +
+      value.substring(end);
+
+    onChange(newText);
+
+    // Set cursor position after inserted text
+    setTimeout(() => {
+      textarea.focus();
+      textarea.setSelectionRange(
+        start + before.length,
+        start + before.length + selectedText.length,
+      );
+    }, 0);
+  };
+
+  const renderMarkdownPreview = (markdown: string) => {
+    // Simple markdown to HTML conversion for preview
+    let html = markdown;
+
+    // Headers
+    html = html.replace(/^### (.*$)/gim, "<h3>$1</h3>");
+    html = html.replace(/^## (.*$)/gim, "<h2>$1</h2>");
+    html = html.replace(/^# (.*$)/gim, "<h1>$1</h1>");
+
+    // Bold
+    html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+    html = html.replace(/__(.+?)__/g, "<strong>$1</strong>");
+
+    // Italic
+    html = html.replace(/\*(.+?)\*/g, "<em>$1</em>");
+    html = html.replace(/_(.+?)_/g, "<em>$1</em>");
+
+    // Code blocks
+    html = html.replace(
+      /```(\w+)?\n([\s\S]+?)```/g,
+      '<pre class="bg-ui-bg-subtle p-4 rounded-lg overflow-x-auto"><code class="language-$1">$2</code></pre>',
+    );
+
+    // Inline code
+    html = html.replace(
+      /`([^`]+)`/g,
+      '<code class="bg-ui-bg-subtle px-1 py-0.5 rounded text-sm">$1</code>',
+    );
+
+    // Links
+    html = html.replace(
+      /\[([^\]]+)\]\(([^)]+)\)/g,
+      '<a href="$2" class="text-ui-fg-interactive underline">$1</a>',
+    );
+
+    // Images
+    html = html.replace(
+      /!\[([^\]]*)\]\(([^)]+)\)/g,
+      '<img src="$2" alt="$1" class="max-w-full h-auto rounded-lg my-2" />',
+    );
+
+    // Lists
+    html = html.replace(/^\* (.+)$/gim, "<li>$1</li>");
+    html = html.replace(/^\- (.+)$/gim, "<li>$1</li>");
+    html = html.replace(
+      /(<li>.*<\/li>)/s,
+      "<ul class='list-disc ml-6'>$1</ul>",
+    );
+
+    // Paragraphs
+    html = html.replace(/\n\n/g, "</p><p>");
+    html = `<p>${html}</p>`;
+
+    return html;
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <Label htmlFor={`markdown-${label}`} className="font-medium">
+          {label}
+        </Label>
+        {helpText && (
+          <div className="flex items-center gap-1 text-xs text-ui-fg-subtle">
+            <InformationCircle className="h-4 w-4" />
+            <span>{helpText}</span>
+          </div>
+        )}
+      </div>
+
+      {showPreview ? (
+        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as any)}>
+          <Tabs.List>
+            <Tabs.Trigger value="write">Write</Tabs.Trigger>
+            <Tabs.Trigger value="preview">Preview</Tabs.Trigger>
+          </Tabs.List>
+
+          <Tabs.Content value="write" className="mt-4">
+            <div className="space-y-2">
+              <div className="flex flex-wrap gap-2 border-b pb-2">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="small"
+                  onClick={() => insertMarkdown("**", "**")}
+                  title="Bold"
+                >
+                  <strong>B</strong>
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="small"
+                  onClick={() => insertMarkdown("*", "*")}
+                  title="Italic"
+                >
+                  <em>I</em>
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="small"
+                  onClick={() => insertMarkdown("`", "`")}
+                  title="Inline Code"
+                >
+                  <CommandLine className="h-4 w-4" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="small"
+                  onClick={() => insertMarkdown("## ")}
+                  title="Heading"
+                >
+                  H2
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="small"
+                  onClick={() => insertMarkdown("### ")}
+                  title="Heading"
+                >
+                  H3
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="small"
+                  onClick={() => insertMarkdown("[", "](url)")}
+                  title="Link"
+                >
+                  Link
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="small"
+                  onClick={() => insertMarkdown("![alt](", ")")}
+                  title="Image"
+                >
+                  Image
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="small"
+                  onClick={() => insertMarkdown("```\n", "\n```")}
+                  title="Code Block"
+                >
+                  Code
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="small"
+                  onClick={() => insertMarkdown("- ")}
+                  title="List"
+                >
+                  List
+                </Button>
+              </div>
+              <Textarea
+                id={`markdown-${label}`}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={placeholder}
+                rows={rows}
+                className="font-mono text-sm"
+              />
+            </div>
+          </Tabs.Content>
+
+          <Tabs.Content value="preview" className="mt-4">
+            <div
+              className={clx(
+                "min-h-[200px] rounded-lg border border-ui-border-base bg-ui-bg-subtle p-4",
+                "prose prose-sm max-w-none",
+              )}
+              dangerouslySetInnerHTML={{
+                __html: value
+                  ? renderMarkdownPreview(value)
+                  : '<p class="text-ui-fg-subtle">Nothing to preview</p>',
+              }}
+            />
+          </Tabs.Content>
+        </Tabs>
+      ) : (
+        <div className="space-y-2">
+          <div className="flex flex-wrap gap-2 border-b pb-2">
+            <Button
+              type="button"
+              variant="secondary"
+              size="small"
+              onClick={() => insertMarkdown("**", "**")}
+              title="Bold"
+            >
+              <strong>B</strong>
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              size="small"
+              onClick={() => insertMarkdown("*", "*")}
+              title="Italic"
+            >
+              <em>I</em>
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              size="small"
+              onClick={() => insertMarkdown("`", "`")}
+              title="Inline Code"
+            >
+              <CommandLine className="h-4 w-4" />
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              size="small"
+              onClick={() => insertMarkdown("```\n", "\n```")}
+              title="Code Block"
+            >
+              Code
+            </Button>
+          </div>
+          <Textarea
+            id={`markdown-${label}`}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            rows={rows}
+            className="font-mono text-sm"
+          />
+        </div>
+      )}
+
+      <div className="text-xs text-ui-fg-subtle">
+        Supports Markdown formatting: **bold**, *italic*, `code`, ```code
+        blocks```, [links](url), ![images](url), and lists
+      </div>
+    </div>
+  );
+};

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

@@ -1,6 +1,6 @@
 import { defineRouteConfig } from "@medusajs/admin-sdk";
 import { Sparkles } from "@medusajs/icons";
-import { Button, Container, toast } from "@medusajs/ui";
+import { Button, Container, toast, Tabs } from "@medusajs/ui";
 import { useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 import { FC, useState } from "react";
@@ -11,6 +11,9 @@ import {
   FlashSaleForm,
 } from "../../../components/FlashSaleForm";
 import { useFlashSaleById } from "../../../hooks/useFlashSaleById";
+// Note: In production, adjust this import path based on your build setup
+// The components should be accessible from the admin-store build
+import { CampaignDetailForm } from "../../../components/campaign-detail-form";
 
 const FlashSaleDetail: FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -33,7 +36,7 @@ const FlashSaleDetail: FC = () => {
         exact: false,
         predicate(query) {
           return ["flash-sales", "flash-sale"].includes(
-            query.queryKey[0] as string
+            query.queryKey[0] as string,
           );
         },
       });
@@ -82,18 +85,52 @@ const FlashSaleDetail: FC = () => {
   };
 
   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>
-    </>
+    <Container>
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold mb-1">{data.name}</h1>
+          <p className="text-ui-fg-subtle">
+            Manage campaign settings and content
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="secondary" onClick={() => navigate("/flash-sales")}>
+            Back to Campaigns
+          </Button>
+          <Button onClick={() => setIsEditing((prev) => !prev)}>
+            {isEditing ? "View Mode" : "Edit Mode"}
+          </Button>
+        </div>
+      </div>
+
+      <Tabs defaultValue="settings">
+        <Tabs.List>
+          <Tabs.Trigger value="settings">Campaign Settings</Tabs.Trigger>
+          <Tabs.Trigger value="details">Campaign Details</Tabs.Trigger>
+        </Tabs.List>
+
+        <Tabs.Content value="settings" className="mt-6">
+          <FlashSaleForm
+            initialData={campaignData}
+            initialProducts={
+              new Map(
+                data.products.map((product) => [product.product.id, product]),
+              )
+            }
+            onSubmit={handleSubmit}
+            onCancel={() => navigate("/flash-sales")}
+            disabled={!isEditing}
+          />
+        </Tabs.Content>
+
+        <Tabs.Content value="details" className="mt-6">
+          <CampaignDetailForm
+            campaignId={id || ""}
+            campaignName={data.name || ""}
+          />
+        </Tabs.Content>
+      </Tabs>
+    </Container>
   );
 };