@package-uploader/ui 1.0.14 → 1.1.0

package/src/components/UploadModal.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { api } from '../api/client';
+import { api, type CourseClassMappings } from '../api/client';
 import DropZone from './DropZone';
+import CourseStructureStep, { type CourseStructure } from './CourseStructureStep';
 
 interface FileItem {
   file: File;
@@ -10,6 +11,8 @@ interface FileItem {
   error?: string;
 }
 
+type Step = 'drop' | 'structure' | 'options';
+
 interface UploadModalProps {
   folderId: number;
   folderName: string;
@@ -25,6 +28,12 @@ export default function UploadModal({
 }: UploadModalProps) {
   const [files, setFiles] = useState<FileItem[]>([]);
   const [uploading, setUploading] = useState(false);
+  const [step, setStep] = useState<Step>('drop');
+
+  // Course structure (parsed from Rise ZIP)
+  const [courseStructure, setCourseStructure] = useState<CourseStructure | null>(null);
+  const [classMappings, setClassMappings] = useState<CourseClassMappings>({});
+  const [parsingStructure, setParsingStructure] = useState(false);
 
   // LMS Thin Pack options
   const [createThinPack, setCreateThinPack] = useState(true); // Default ON
@@ -34,21 +43,52 @@ export default function UploadModal({
   const [createSharedLink, setCreateSharedLink] = useState(false); // Default OFF
   const [sharedLinkName, setSharedLinkName] = useState('');
 
+  // Skin option (optional)
+  const [skinName, setSkinName] = useState('');
+
+  // Wrap & Download mode (skip CDS upload)
+  const [wrapOnly, setWrapOnly] = useState(false);
+
   // Generate slug from name: replace spaces with underscores
   function generateSlug(name: string): string {
     return name.trim().replace(/\s+/g, '_');
   }
 
-  function handleFilesAccepted(newFiles: File[]) {
+  async function handleFilesAccepted(newFiles: File[]) {
     const fileItems: FileItem[] = newFiles.map((file) => ({
       file,
       status: 'pending',
     }));
     setFiles((prev) => [...prev, ...fileItems]);
+
+    // Auto-parse structure for single file uploads
+    const allFiles = [...files, ...fileItems];
+    if (allFiles.length === 1 || (files.length === 0 && newFiles.length === 1)) {
+      const targetFile = newFiles.length === 1 ? newFiles[0] : allFiles[0].file;
+      setParsingStructure(true);
+      try {
+        const structure = await api.parseCourseStructure(targetFile);
+        setCourseStructure(structure);
+      } catch {
+        setCourseStructure(null);
+      }
+      setParsingStructure(false);
+    } else {
+      // Multi-file: no structure parsing
+      setCourseStructure(null);
+    }
   }
 
   function handleRemoveFile(index: number) {
-    setFiles((prev) => prev.filter((_, i) => i !== index));
+    setFiles((prev) => {
+      const next = prev.filter((_, i) => i !== index);
+      // Reset structure if we removed the only file or now have multiple
+      if (next.length !== 1) {
+        setCourseStructure(null);
+        setClassMappings({});
+      }
+      return next;
+    });
   }
 
   function formatSize(bytes: number): string {
@@ -57,12 +97,26 @@ export default function UploadModal({
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   }
 
+  function handleNextFromDrop() {
+    if (courseStructure && files.length === 1) {
+      setStep('structure');
+    } else {
+      setStep('options');
+    }
+  }
+
   async function handleUpload() {
     const pendingFiles = files.filter((f) => f.status === 'pending');
     if (pendingFiles.length === 0) return;
 
     setUploading(true);
 
+    // Build class mappings option (only if any assignments exist)
+    const hasClassAssignments =
+      classMappings.course ||
+      Object.keys(classMappings.lessons || {}).length > 0 ||
+      Object.keys(classMappings.blocks || {}).length > 0;
+
     for (let i = 0; i < files.length; i++) {
       if (files[i].status !== 'pending') continue;
 
@@ -72,56 +126,82 @@ export default function UploadModal({
       );
 
       try {
-        // 1. Upload file
-        const result = await api.uploadCourse(files[i].file, folderId);
-
-        if (result.success && result.documentId) {
-          // 2. Create LMS Thin Pack if enabled
-          if (createThinPack) {
-            const name = thinPackName.trim() || `${result.documentName} - LMS Thin Pack`;
-            try {
-              await api.createSharedLink(result.documentId, {
-                name,
-                token: generateSlug(name),
-                isPublic: true,
-                isForThinPackage: true,
-              });
-            } catch (err) {
-              console.error('Failed to create thin pack:', err);
-            }
-          }
+        if (wrapOnly) {
+          // Wrap & Download mode: wrap with PA-Patcher and download, no CDS upload
+          const wrapOptions: { skin?: string; classMappings?: CourseClassMappings } = {};
+          if (skinName.trim()) wrapOptions.skin = skinName.trim();
+          if (hasClassAssignments) wrapOptions.classMappings = classMappings;
 
-          // 3. Create Shared Link if enabled
-          if (createSharedLink) {
-            const name = sharedLinkName.trim() || `${result.documentName} - Private`;
-            try {
-              await api.createSharedLink(result.documentId, {
-                name,
-                token: generateSlug(name),
-                isPublic: false,
-                isForThinPackage: false,
-              });
-            } catch (err) {
-              console.error('Failed to create shared link:', err);
-            }
-          }
+          await api.wrapAndDownload(
+            files[i].file,
+            Object.keys(wrapOptions).length > 0 ? wrapOptions : undefined
+          );
 
           setFiles((prev) =>
             prev.map((f, idx) =>
-              idx === i
-                ? {
-                    ...f,
-                    status: 'success',
-                    documentId: result.documentId ?? undefined,
-                    documentName: result.documentName,
-                  }
-                : f
+              idx === i ? { ...f, status: 'success' } : f
             )
           );
-
-          onUploadComplete(result.documentId);
         } else {
-          throw new Error(result.errors?.join(', ') || 'Upload failed');
+          // Normal upload mode
+          const uploadOptions: { title?: string; skin?: string; classMappings?: CourseClassMappings } = {};
+          if (skinName.trim()) uploadOptions.skin = skinName.trim();
+          if (hasClassAssignments) uploadOptions.classMappings = classMappings;
+
+          const result = await api.uploadCourse(
+            files[i].file,
+            folderId,
+            Object.keys(uploadOptions).length > 0 ? uploadOptions : undefined
+          );
+
+          if (result.success && result.documentId) {
+            // Create LMS Thin Pack if enabled
+            if (createThinPack) {
+              const name = thinPackName.trim() || `${result.documentName} - LMS Thin Pack`;
+              try {
+                await api.createSharedLink(result.documentId, {
+                  name,
+                  token: generateSlug(name),
+                  isPublic: true,
+                  isForThinPackage: true,
+                });
+              } catch (err) {
+                console.error('Failed to create thin pack:', err);
+              }
+            }
+
+            // Create Shared Link if enabled
+            if (createSharedLink) {
+              const name = sharedLinkName.trim() || `${result.documentName} - Private`;
+              try {
+                await api.createSharedLink(result.documentId, {
+                  name,
+                  token: generateSlug(name),
+                  isPublic: false,
+                  isForThinPackage: false,
+                });
+              } catch (err) {
+                console.error('Failed to create shared link:', err);
+              }
+            }
+
+            setFiles((prev) =>
+              prev.map((f, idx) =>
+                idx === i
+                  ? {
+                      ...f,
+                      status: 'success',
+                      documentId: result.documentId ?? undefined,
+                      documentName: result.documentName,
+                    }
+                  : f
+              )
+            );
+
+            onUploadComplete(result.documentId);
+          } else {
+            throw new Error(result.errors?.join(', ') || 'Upload failed');
+          }
         }
       } catch (err) {
         setFiles((prev) =>
@@ -130,7 +210,7 @@ export default function UploadModal({
               ? {
                   ...f,
                   status: 'error',
-                  error: err instanceof Error ? err.message : 'Upload failed',
+                  error: err instanceof Error ? err.message : wrapOnly ? 'Wrap failed' : 'Upload failed',
                 }
               : f
           )
@@ -156,132 +236,275 @@ export default function UploadModal({
     <div className="modal-overlay" onClick={onClose}>
       <div className="modal upload-modal" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
-          <h3 className="modal-title">Upload to: {folderName}</h3>
+          <h3 className="modal-title">
+            {wrapOnly ? 'Wrap & Download' : `Upload to: ${folderName}`}
+            {step === 'structure' && ' — Customize'}
+            {step === 'options' && ' — Options'}
+          </h3>
           <button className="modal-close" onClick={onClose}>
             x
           </button>
         </div>
 
         <div className="upload-modal-content">
-          {/* Dropzone */}
-          <DropZone onFilesAccepted={handleFilesAccepted} disabled={uploading} />
-
-          {/* File List */}
-          {hasFiles && (
-            <div className="upload-file-list">
-              <h4>Files ({files.length})</h4>
-              {files.map((item, index) => (
-                <div key={index} className="upload-file-item">
-                  <div className="upload-file-info">
-                    <span className="upload-file-name">{item.file.name}</span>
-                    <span className="upload-file-size">{formatSize(item.file.size)}</span>
-                  </div>
-                  <div className="upload-file-status">
-                    {item.status === 'pending' && (
-                      <>
-                        <span className="status-pending">Ready</span>
-                        <button
-                          className="btn btn-sm btn-secondary"
-                          onClick={() => handleRemoveFile(index)}
-                        >
-                          Remove
-                        </button>
-                      </>
-                    )}
-                    {item.status === 'uploading' && (
-                      <>
-                        <div className="spinner" />
-                        <span className="status-uploading">Uploading...</span>
-                      </>
-                    )}
-                    {item.status === 'success' && (
-                      <span className="status-success">Uploaded</span>
-                    )}
-                    {item.status === 'error' && (
-                      <span className="status-error" title={item.error}>
-                        Failed
-                      </span>
-                    )}
-                  </div>
+          {/* Step 1: Drop Zone */}
+          {step === 'drop' && (
+            <>
+              <DropZone onFilesAccepted={handleFilesAccepted} disabled={uploading} />
+
+              {/* File List */}
+              {hasFiles && (
+                <div className="upload-file-list">
+                  <h4>Files ({files.length})</h4>
+                  {files.map((item, index) => (
+                    <div key={index} className="upload-file-item">
+                      <div className="upload-file-info">
+                        <span className="upload-file-name">{item.file.name}</span>
+                        <span className="upload-file-size">{formatSize(item.file.size)}</span>
+                      </div>
+                      <div className="upload-file-status">
+                        {item.status === 'pending' && (
+                          <button
+                            className="btn btn-sm btn-secondary"
+                            onClick={() => handleRemoveFile(index)}
+                          >
+                            Remove
+                          </button>
+                        )}
+                        {item.status === 'uploading' && (
+                          <>
+                            <div className="spinner" />
+                            <span className="status-uploading">{wrapOnly ? 'Wrapping...' : 'Uploading...'}</span>
+                          </>
+                        )}
+                        {item.status === 'success' && (
+                          <span className="status-success">{wrapOnly ? 'Downloaded' : 'Uploaded'}</span>
+                        )}
+                        {item.status === 'error' && (
+                          <span className="status-error" title={item.error}>
+                            Failed
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  ))}
                 </div>
-              ))}
-            </div>
+              )}
+
+              {/* Parsing indicator */}
+              {parsingStructure && (
+                <div className="structure-parsing-indicator">
+                  <div className="spinner" />
+                  <span>Analyzing course structure...</span>
+                </div>
+              )}
+
+              {/* Structure detected badge */}
+              {courseStructure && !parsingStructure && (
+                <div className="structure-detected-badge">
+                  Rise course detected — {courseStructure.lessons.length} lessons,{' '}
+                  {courseStructure.lessons.reduce((sum, l) => sum + l.blocks.length, 0)} blocks.
+                  You can customize classes in the next step.
+                </div>
+              )}
+
+              {/* Multi-file note */}
+              {files.length > 1 && (
+                <div className="structure-multi-note">
+                  Course structure customization is available for single-file uploads only.
+                </div>
+              )}
+            </>
           )}
 
-          {/* Link Options */}
-          <div className="upload-link-options">
-            <h4>After upload, create:</h4>
-
-            {/* LMS Thin Pack */}
-            <div className="upload-link-option">
-              <label className="upload-link-toggle">
-                <input
-                  type="checkbox"
-                  checked={createThinPack}
-                  onChange={(e) => setCreateThinPack(e.target.checked)}
-                  disabled={uploading}
-                />
-                <span>LMS Thin Pack (public)</span>
-              </label>
-              {createThinPack && (
-                <div className="upload-link-name-input">
+          {/* Step 2: Course Structure */}
+          {step === 'structure' && courseStructure && (
+            <CourseStructureStep
+              structure={courseStructure}
+              classMappings={classMappings}
+              onChange={setClassMappings}
+            />
+          )}
+
+          {/* Step 3: Options */}
+          {step === 'options' && (
+            <div className="upload-link-options">
+              {/* Wrap & Download toggle */}
+              <div className="upload-link-option">
+                <label className="upload-link-toggle">
                   <input
-                    type="text"
-                    placeholder="Link name (uses document name if empty)"
-                    value={thinPackName}
-                    onChange={(e) => setThinPackName(e.target.value)}
+                    type="checkbox"
+                    checked={wrapOnly}
+                    onChange={(e) => setWrapOnly(e.target.checked)}
                     disabled={uploading}
                   />
-                  <span className="slug-preview">Slug: {thinPackSlugPreview}</span>
-                </div>
+                  <span>Wrap & Download only (skip CDS upload)</span>
+                </label>
+                {wrapOnly && (
+                  <span className="slug-preview">Wraps with PA-Patcher and downloads the ZIP directly</span>
+                )}
+              </div>
+
+              {/* CDS upload options (hidden in wrap-only mode) */}
+              {!wrapOnly && (
+                <>
+                  <h4>After upload, create:</h4>
+
+                  {/* LMS Thin Pack */}
+                  <div className="upload-link-option">
+                    <label className="upload-link-toggle">
+                      <input
+                        type="checkbox"
+                        checked={createThinPack}
+                        onChange={(e) => setCreateThinPack(e.target.checked)}
+                        disabled={uploading}
+                      />
+                      <span>LMS Thin Pack (public)</span>
+                    </label>
+                    {createThinPack && (
+                      <div className="upload-link-name-input">
+                        <input
+                          type="text"
+                          placeholder="Link name (uses document name if empty)"
+                          value={thinPackName}
+                          onChange={(e) => setThinPackName(e.target.value)}
+                          disabled={uploading}
+                        />
+                        <span className="slug-preview">Slug: {thinPackSlugPreview}</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Shared Link */}
+                  <div className="upload-link-option">
+                    <label className="upload-link-toggle">
+                      <input
+                        type="checkbox"
+                        checked={createSharedLink}
+                        onChange={(e) => setCreateSharedLink(e.target.checked)}
+                        disabled={uploading}
+                      />
+                      <span>Shared Link (private/SSO)</span>
+                    </label>
+                    {createSharedLink && (
+                      <div className="upload-link-name-input">
+                        <input
+                          type="text"
+                          placeholder="Link name (uses document name if empty)"
+                          value={sharedLinkName}
+                          onChange={(e) => setSharedLinkName(e.target.value)}
+                          disabled={uploading}
+                        />
+                        <span className="slug-preview">Slug: {sharedLinkSlugPreview}</span>
+                      </div>
+                    )}
+                  </div>
+                </>
               )}
-            </div>
 
-            {/* Shared Link */}
-            <div className="upload-link-option">
-              <label className="upload-link-toggle">
-                <input
-                  type="checkbox"
-                  checked={createSharedLink}
-                  onChange={(e) => setCreateSharedLink(e.target.checked)}
-                  disabled={uploading}
-                />
-                <span>Shared Link (private/SSO)</span>
-              </label>
-              {createSharedLink && (
+              {/* Skin Option */}
+              <div className="upload-link-option" style={{ marginTop: '12px' }}>
+                <label className="upload-link-toggle">
+                  <span>Skin (optional)</span>
+                </label>
                 <div className="upload-link-name-input">
                   <input
                     type="text"
-                    placeholder="Link name (uses document name if empty)"
-                    value={sharedLinkName}
-                    onChange={(e) => setSharedLinkName(e.target.value)}
+                    placeholder="e.g. marketing"
+                    value={skinName}
+                    onChange={(e) => setSkinName(e.target.value)}
                     disabled={uploading}
                   />
-                  <span className="slug-preview">Slug: {sharedLinkSlugPreview}</span>
+                  <span className="slug-preview">CSS class for custom skin styling</span>
+                </div>
+              </div>
+
+              {/* Class mappings summary (if any assigned) */}
+              {(classMappings.course ||
+                Object.keys(classMappings.lessons || {}).length > 0 ||
+                Object.keys(classMappings.blocks || {}).length > 0) && (
+                <div className="structure-summary-badge">
+                  Class assignments:{' '}
+                  {[
+                    classMappings.course ? '1 course' : '',
+                    Object.keys(classMappings.lessons || {}).length > 0
+                      ? `${Object.keys(classMappings.lessons || {}).length} lesson(s)`
+                      : '',
+                    Object.keys(classMappings.blocks || {}).length > 0
+                      ? `${Object.keys(classMappings.blocks || {}).length} block(s)`
+                      : '',
+                  ]
+                    .filter(Boolean)
+                    .join(', ')}
                 </div>
               )}
             </div>
-          </div>
+          )}
         </div>
 
         <div className="modal-footer">
-          <button className="btn btn-secondary" onClick={onClose} disabled={uploading}>
-            Cancel
-          </button>
-          <button
-            className="btn btn-primary"
-            onClick={handleUpload}
-            disabled={uploading || pendingCount === 0}
-          >
-            {uploading ? (
-              <>
-                <div className="spinner" />
-                Uploading...
-              </>
-            ) : (
-              `Upload ${pendingCount} file${pendingCount !== 1 ? 's' : ''}`
-            )}
-          </button>
+          {step === 'drop' && (
+            <>
+              <button className="btn btn-secondary" onClick={onClose} disabled={uploading}>
+                Cancel
+              </button>
+              <button
+                className="btn btn-primary"
+                onClick={handleNextFromDrop}
+                disabled={uploading || pendingCount === 0 || parsingStructure}
+              >
+                Next
+              </button>
+            </>
+          )}
+
+          {step === 'structure' && (
+            <>
+              <button className="btn btn-secondary" onClick={() => setStep('drop')}>
+                Back
+              </button>
+              <button
+                className="btn btn-secondary"
+                onClick={() => {
+                  setClassMappings({});
+                  setStep('options');
+                }}
+              >
+                Skip
+              </button>
+              <button className="btn btn-primary" onClick={() => setStep('options')}>
+                Next
+              </button>
+            </>
+          )}
+
+          {step === 'options' && (
+            <>
+              <button
+                className="btn btn-secondary"
+                onClick={() => setStep(courseStructure && files.length === 1 ? 'structure' : 'drop')}
+                disabled={uploading}
+              >
+                Back
+              </button>
+              <button
+                className="btn btn-primary"
+                onClick={handleUpload}
+                disabled={uploading || pendingCount === 0}
+              >
+                {uploading ? (
+                  <>
+                    <div className="spinner" />
+                    {wrapOnly ? 'Wrapping...' : 'Uploading...'}
+                  </>
+                ) : wrapOnly ? (
+                  `Wrap & Download ${pendingCount} file${pendingCount !== 1 ? 's' : ''}`
+                ) : (
+                  `Upload ${pendingCount} file${pendingCount !== 1 ? 's' : ''}`
+                )}
+              </button>
+            </>
+          )}
         </div>
       </div>
     </div>