From 5bc2b0d2221f7a6a7b83f76bdd4cc8c91de01cd6 Mon Sep 17 00:00:00 2001
From: "matthias.lotz" <matthias.lotz@hobbyhimmel.de>
Date: Sun, 9 Nov 2025 21:49:33 +0100
Subject: [PATCH] refactor(frontend): Improve consent and success UX

- Move ConsentCheckboxes below DescriptionInput for better flow
- Replace success dialog with inline success display
- Add copy-to-clipboard button for group ID
- Show detailed next steps and GDPR contact info inline
---
 .../src/Components/Pages/MultiUploadPage.js   | 194 +++++++++++++++---
 1 file changed, 166 insertions(+), 28 deletions(-)

diff --git a/frontend/src/Components/Pages/MultiUploadPage.js b/frontend/src/Components/Pages/MultiUploadPage.js
index 87859aa..0b97bbc 100644
--- a/frontend/src/Components/Pages/MultiUploadPage.js
+++ b/frontend/src/Components/Pages/MultiUploadPage.js
@@ -12,7 +12,6 @@ import DescriptionInput from '../ComponentUtils/MultiUpload/DescriptionInput';
 import UploadProgress from '../ComponentUtils/MultiUpload/UploadProgress';
 import Loading from '../ComponentUtils/LoadingAnimation/Loading';
 import ConsentCheckboxes from '../ComponentUtils/MultiUpload/ConsentCheckboxes';
-import UploadSuccessDialog from '../ComponentUtils/MultiUpload/UploadSuccessDialog';
 
 // Utils
 import { uploadImageBatch } from '../../Utils/batchUpload';
@@ -42,7 +41,6 @@ function MultiUploadPage() {
   const [uploadResult, setUploadResult] = useState(null);
   const [isEditMode, setIsEditMode] = useState(false);
   const [imageDescriptions, setImageDescriptions] = useState({});
-  const [showSuccessDialog, setShowSuccessDialog] = useState(false);
 
   // Cleanup object URLs when component unmounts
   useEffect(() => {
@@ -189,11 +187,10 @@ function MultiUploadPage() {
       clearInterval(progressInterval);
       setUploadProgress(100);
 
-      // Show success dialog
+      // Show success content
       setTimeout(() => {
         setUploadComplete(true);
         setUploadResult(result);
-        setShowSuccessDialog(true);
       }, 500);
 
     } catch (error) {
@@ -247,17 +244,17 @@ function MultiUploadPage() {
 
                 {selectedImages.length > 0 && (
                   <>
+                    <DescriptionInput 
+                      metadata={metadata}
+                      onMetadataChange={setMetadata}
+                    />
+
                     <ConsentCheckboxes 
                       consents={consents}
                       onConsentChange={setConsents}
                       disabled={uploading}
                     />
 
-                    <DescriptionInput 
-                      metadata={metadata}
-                      onMetadataChange={setMetadata}
-                    />
-
                     <Box sx={{ display: 'flex', gap: '15px', justifyContent: 'center', mt: '20px', flexWrap: 'wrap' }}>
                       <Button
                         sx={{
@@ -317,31 +314,172 @@ function MultiUploadPage() {
               </>
             ) : (
               <div style={{ textAlign: 'center', padding: '40px 0' }}>
-                <Loading />
-                <UploadProgress 
-                  progress={uploadProgress}
-                  totalFiles={selectedImages.length}
-                  isUploading={uploading}
-                />
+                {!uploadComplete ? (
+                  <>
+                    <Loading />
+                    <UploadProgress 
+                      progress={uploadProgress}
+                      totalFiles={selectedImages.length}
+                      isUploading={uploading}
+                    />
+                  </>
+                ) : (
+                  <Box sx={{
+                    mt: 4,
+                    p: 4,
+                    borderRadius: '16px',
+                    background: 'linear-gradient(135deg, #4CAF50 0%, #45a049 100%)',
+                    color: 'white',
+                    boxShadow: '0 8px 32px rgba(76, 175, 80, 0.4)',
+                    animation: 'slideIn 0.5s ease-out',
+                    '@keyframes slideIn': {
+                      from: {
+                        opacity: 0,
+                        transform: 'translateY(-20px)'
+                      },
+                      to: {
+                        opacity: 1,
+                        transform: 'translateY(0)'
+                      }
+                    }
+                  }}>
+                    {/* Success Icon & Title */}
+                    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2, mb: 2 }}>
+                      <Box sx={{ 
+                        bgcolor: 'white', 
+                        borderRadius: '50%', 
+                        width: 60, 
+                        height: 60, 
+                        display: 'flex', 
+                        alignItems: 'center', 
+                        justifyContent: 'center',
+                        boxShadow: '0 4px 12px rgba(0,0,0,0.2)'
+                      }}>
+                        <Typography sx={{ fontSize: '32px' }}>✅</Typography>
+                      </Box>
+                      <Typography sx={{ fontSize: '32px', fontWeight: 'bold' }}>
+                        Upload erfolgreich!
+                      </Typography>
+                    </Box>
+
+                    {/* Upload Count */}
+                    <Typography sx={{ fontSize: '18px', mb: 3 }}>
+                      <strong>{uploadResult?.imageCount || 0}</strong> {uploadResult?.imageCount === 1 ? 'Bild wurde' : 'Bilder wurden'} erfolgreich hochgeladen 
+                      und {uploadResult?.imageCount === 1 ? 'wird' : 'werden'} nach der Prüfung durch das Hobbyhimmel-Team angezeigt.
+                    </Typography>
+
+                    {/* Group ID Box */}
+                    <Box sx={{ 
+                      bgcolor: 'rgba(255,255,255,0.2)', 
+                      borderRadius: '12px', 
+                      p: 3, 
+                      mb: 3,
+                      border: '2px solid rgba(255,255,255,0.3)'
+                    }}>
+                      <Typography sx={{ fontSize: '14px', mb: 1, opacity: 0.9 }}>
+                        Ihre Referenz-Nummer:
+                      </Typography>
+                      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
+                        <Typography sx={{ 
+                          fontSize: '24px', 
+                          fontFamily: 'monospace', 
+                          fontWeight: 'bold',
+                          letterSpacing: '2px'
+                        }}>
+                          {uploadResult?.groupId}
+                        </Typography>
+                        <Button
+                          sx={{
+                            bgcolor: 'white',
+                            color: '#4CAF50',
+                            minWidth: 'auto',
+                            px: 2,
+                            py: 1,
+                            '&:hover': {
+                              bgcolor: '#f0f0f0'
+                            }
+                          }}
+                          onClick={() => {
+                            navigator.clipboard.writeText(uploadResult?.groupId || '');
+                          }}
+                        >
+                          📋 Kopieren
+                        </Button>
+                      </Box>
+                      <Typography sx={{ fontSize: '12px', mt: 1, opacity: 0.8 }}>
+                        Notieren Sie sich diese Nummer für spätere Anfragen
+                      </Typography>
+                    </Box>
+
+                    {/* Next Steps */}
+                    <Box sx={{ 
+                      bgcolor: 'rgba(255,255,255,0.15)', 
+                      borderRadius: '8px', 
+                      p: 2, 
+                      mb: 3,
+                      textAlign: 'left'
+                    }}>
+                      <Typography sx={{ fontSize: '16px', fontWeight: 600, mb: 1.5 }}>
+                        Was passiert jetzt?
+                      </Typography>
+                      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                        <Box sx={{ display: 'flex', gap: 1 }}>
+                          <Typography sx={{ fontSize: '14px' }}>•</Typography>
+                          <Typography sx={{ fontSize: '14px' }}>
+                            Ihre Bilder werden vom Team geprüft
+                          </Typography>
+                        </Box>
+                        <Box sx={{ display: 'flex', gap: 1 }}>
+                          <Typography sx={{ fontSize: '14px' }}>•</Typography>
+                          <Typography sx={{ fontSize: '14px' }}>
+                            Nach Freigabe erscheinen sie auf dem Werkstatt-Monitor
+                          </Typography>
+                        </Box>
+                        <Box sx={{ display: 'flex', gap: 1 }}>
+                          <Typography sx={{ fontSize: '14px' }}>•</Typography>
+                          <Typography sx={{ fontSize: '14px' }}>
+                            Bei gewählter Social Media Einwilligung werden sie entsprechend veröffentlicht
+                          </Typography>
+                        </Box>
+                      </Box>
+                    </Box>
+
+                    {/* GDPR Contact */}
+                    <Typography sx={{ fontSize: '12px', opacity: 0.9, mb: 3 }}>
+                      <strong>Fragen oder Widerruf?</strong> Kontaktieren Sie uns mit Ihrer Referenz-Nummer unter: <strong>it@hobbyhimmel.de</strong>
+                    </Typography>
+
+                    {/* Action Button */}
+                    <Button
+                      sx={{
+                        bgcolor: 'white',
+                        color: '#4CAF50',
+                        fontWeight: 'bold',
+                        fontSize: '16px',
+                        px: 5,
+                        py: 1.5,
+                        borderRadius: '25px',
+                        textTransform: 'none',
+                        boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
+                        '&:hover': {
+                          bgcolor: '#f0f0f0',
+                          transform: 'scale(1.05)',
+                          boxShadow: '0 6px 16px rgba(0,0,0,0.3)'
+                        },
+                        transition: 'all 0.3s ease'
+                      }}
+                      onClick={() => window.location.reload()}
+                    >
+                      👍 Weitere Bilder hochladen
+                    </Button>
+                  </Box>
+                )}
               </div>
             )}
           </CardContent>
         </Card>
       </Container>
 
-      {/* Success Dialog */}
-      {showSuccessDialog && uploadResult && (
-        <UploadSuccessDialog 
-          open={showSuccessDialog}
-          onClose={() => {
-            setShowSuccessDialog(false);
-            window.location.reload();
-          }}
-          groupId={uploadResult.groupId}
-          uploadCount={uploadResult.imageCount}
-        />
-      )}
-
       <div className="footerContainer">
         <Footer />
       </div>