@package-uploader/ui 1.0.14 → 1.1.1

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;
@@ -26,15 +27,27 @@ export default function UploadModal({
   const [files, setFiles] = useState<FileItem[]>([]);
   const [uploading, setUploading] = useState(false);
 
+  // Course structure — on-demand, collapsible
+  const [courseStructure, setCourseStructure] = useState<CourseStructure | null>(null);
+  const [classMappings, setClassMappings] = useState<CourseClassMappings>({});
+  const [parsingStructure, setParsingStructure] = useState(false);
+  const [structurePanelOpen, setStructurePanelOpen] = useState(false);
+  const [parseFailed, setParseFailed] = useState(false);
+
   // LMS Thin Pack options
-  const [createThinPack, setCreateThinPack] = useState(true); // Default ON
+  const [createThinPack, setCreateThinPack] = useState(true);
   const [thinPackName, setThinPackName] = useState('');
 
   // Shared Link options
-  const [createSharedLink, setCreateSharedLink] = useState(false); // Default OFF
+  const [createSharedLink, setCreateSharedLink] = useState(false);
   const [sharedLinkName, setSharedLinkName] = useState('');
 
-  // Generate slug from name: replace spaces with underscores
+  // Skin option
+  const [skinName, setSkinName] = useState('');
+
+  // Wrap & Download mode
+  const [wrapOnly, setWrapOnly] = useState(false);
+
   function generateSlug(name: string): string {
     return name.trim().replace(/\s+/g, '_');
   }
@@ -45,10 +58,54 @@ export default function UploadModal({
       status: 'pending',
     }));
     setFiles((prev) => [...prev, ...fileItems]);
+
+    // Reset structure state when files change
+    setCourseStructure(null);
+    setClassMappings({});
+    setStructurePanelOpen(false);
+    setParseFailed(false);
   }
 
   function handleRemoveFile(index: number) {
-    setFiles((prev) => prev.filter((_, i) => i !== index));
+    setFiles((prev) => {
+      const next = prev.filter((_, i) => i !== index);
+      if (next.length !== 1) {
+        setCourseStructure(null);
+        setClassMappings({});
+        setStructurePanelOpen(false);
+        setParseFailed(false);
+      }
+      return next;
+    });
+  }
+
+  async function handleCustomizeClick() {
+    // Already parsed — just toggle
+    if (courseStructure) {
+      setStructurePanelOpen((prev) => !prev);
+      return;
+    }
+
+    // Already failed — don't retry
+    if (parseFailed) return;
+
+    // Parse on first click
+    if (files.length !== 1) return;
+
+    setParsingStructure(true);
+    try {
+      const structure = await api.parseCourseStructure(files[0].file);
+      if (structure) {
+        setCourseStructure(structure);
+        setStructurePanelOpen(true);
+        setParseFailed(false);
+      } else {
+        setParseFailed(true);
+      }
+    } catch {
+      setParseFailed(true);
+    }
+    setParsingStructure(false);
   }
 
   function formatSize(bytes: number): string {
@@ -63,65 +120,91 @@ export default function UploadModal({
 
     setUploading(true);
 
+    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;
 
-      // Mark as uploading
       setFiles((prev) =>
         prev.map((f, idx) => (idx === i ? { ...f, status: 'uploading' } : f))
       );
 
       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) {
+          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');
+          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) {
+            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 (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 +213,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
           )
@@ -143,8 +226,8 @@ export default function UploadModal({
 
   const pendingCount = files.filter((f) => f.status === 'pending').length;
   const hasFiles = files.length > 0;
+  const isSingleFile = files.length === 1;
 
-  // Preview slugs
   const thinPackSlugPreview = thinPackName.trim()
     ? generateSlug(thinPackName)
     : '(will use document name)';
@@ -152,11 +235,28 @@ export default function UploadModal({
     ? generateSlug(sharedLinkName)
     : '(will use document name)';
 
+  // Class assignment count for summary
+  const assignmentCount =
+    (classMappings.course ? 1 : 0) +
+    Object.keys(classMappings.lessons || {}).length +
+    Object.keys(classMappings.blocks || {}).length;
+
+  // Customize button label
+  const customizeLabel = parsingStructure
+    ? 'Analyzing...'
+    : parseFailed
+    ? 'Not a Rise course'
+    : courseStructure
+    ? `Customize Classes (${courseStructure.lessons.length} lessons)`
+    : 'Customize Classes';
+
   return (
     <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}`}
+          </h3>
           <button className="modal-close" onClick={onClose}>
             x
           </button>
@@ -178,24 +278,21 @@ export default function UploadModal({
                   </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>
-                      </>
+                      <button
+                        className="btn btn-sm btn-secondary"
+                        onClick={() => handleRemoveFile(index)}
+                      >
+                        Remove
+                      </button>
                     )}
                     {item.status === 'uploading' && (
                       <>
                         <div className="spinner" />
-                        <span className="status-uploading">Uploading...</span>
+                        <span className="status-uploading">{wrapOnly ? 'Wrapping...' : 'Uploading...'}</span>
                       </>
                     )}
                     {item.status === 'success' && (
-                      <span className="status-success">Uploaded</span>
+                      <span className="status-success">{wrapOnly ? 'Downloaded' : 'Uploaded'}</span>
                     )}
                     {item.status === 'error' && (
                       <span className="status-error" title={item.error}>
@@ -208,60 +305,146 @@ export default function UploadModal({
             </div>
           )}
 
-          {/* Link Options */}
-          <div className="upload-link-options">
-            <h4>After upload, create:</h4>
+          {/* Customize Classes — on-demand toggle */}
+          {isSingleFile && !uploading && (
+            <div className="structure-section">
+              <button
+                className={`structure-toggle-btn${structurePanelOpen ? ' open' : ''}${parseFailed ? ' disabled' : ''}`}
+                onClick={handleCustomizeClick}
+                disabled={parsingStructure || parseFailed}
+              >
+                {parsingStructure && <div className="spinner" />}
+                <span>{customizeLabel}</span>
+                {!parsingStructure && !parseFailed && (
+                  <span className="structure-toggle-arrow">
+                    {structurePanelOpen ? '\u25B2' : '\u25BC'}
+                  </span>
+                )}
+                {assignmentCount > 0 && !structurePanelOpen && (
+                  <span className="course-structure-badge">{assignmentCount} assigned</span>
+                )}
+              </button>
 
-            {/* LMS Thin Pack */}
+              {structurePanelOpen && courseStructure && (
+                <div className="structure-panel">
+                  <CourseStructureStep
+                    structure={courseStructure}
+                    classMappings={classMappings}
+                    onChange={setClassMappings}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Options */}
+          <div className="upload-link-options">
+            {/* Wrap & Download toggle */}
             <div className="upload-link-option">
               <label className="upload-link-toggle">
                 <input
                   type="checkbox"
-                  checked={createThinPack}
-                  onChange={(e) => setCreateThinPack(e.target.checked)}
+                  checked={wrapOnly}
+                  onChange={(e) => setWrapOnly(e.target.checked)}
                   disabled={uploading}
                 />
-                <span>LMS Thin Pack (public)</span>
+                <span>Wrap & Download only (skip CDS upload)</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>
+              {wrapOnly && (
+                <span className="slug-preview">Wraps with PA-Patcher and downloads the ZIP directly</span>
               )}
             </div>
 
-            {/* Shared Link */}
-            <div className="upload-link-option">
+            {/* CDS upload options */}
+            {!wrapOnly && (
+              <>
+                <h4>After upload, create:</h4>
+
+                <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>
+
+                <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>
+              </>
+            )}
+
+            {/* Skin */}
+            <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="checkbox"
-                  checked={createSharedLink}
-                  onChange={(e) => setCreateSharedLink(e.target.checked)}
+                  type="text"
+                  placeholder="e.g. marketing"
+                  value={skinName}
+                  onChange={(e) => setSkinName(e.target.value)}
                   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>
-              )}
+                <span className="slug-preview">CSS class for custom skin styling</span>
+              </div>
             </div>
           </div>
+
+          {/* Class assignments summary */}
+          {assignmentCount > 0 && !structurePanelOpen && (
+            <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 className="modal-footer">
@@ -276,8 +459,10 @@ export default function UploadModal({
             {uploading ? (
               <>
                 <div className="spinner" />
-                Uploading...
+                {wrapOnly ? 'Wrapping...' : 'Uploading...'}
               </>
+            ) : wrapOnly ? (
+              `Wrap & Download ${pendingCount} file${pendingCount !== 1 ? 's' : ''}`
             ) : (
               `Upload ${pendingCount} file${pendingCount !== 1 ? 's' : ''}`
             )}