Update templates/combined_summary.html

templates/combined_summary.html

@@ -398,7 +398,7 @@
             border-color: #10B981;
         }
         /* Green border when section is visible */
-        .ingredients выполнение-section:not(.hidden) .ingredient-image {
+        .ingredients-section:not(.hidden) .ingredient-image {
             border: 2px solid #10B981;
         }
         /* Ensure ingredient section is smooth */
@@ -447,8 +447,8 @@
             z-index: 1;
             position: relative;
         }
-         .order-confirmed.hidden {
-            display: none; /* Add a hidden class for the confirmation section */
+        .order-confirmed.hidden {
+            display: none;
         }
         /* Tier details animation */
         .tier-details {
@@ -476,6 +476,15 @@
             outline: none;
             transform: scale(1.05);
         }
+        /* Timer styles */
+        .countdown-timer {
+            font-weight: 600;
+            color: #C2410C;
+            background: #FFE4D6;
+            padding: 4px 8px;
+            border-radius: 8px;
+            display: inline-block;
+        }
         /* Responsive adjustments */
         @media (max-width: 768px) {
             .custom-class {
@@ -492,6 +501,9 @@
             .grid {
                 grid-template-columns: repeat(2, 1fr);
             }
+            .countdown-timer {
+                font-size: 0.875rem;
+            }
         }
         @media (max-width: 480px) {
             .custom-class {
@@ -571,6 +583,10 @@
             .grid {
                 grid-template-columns: repeat(2, 1fr);
             }
+            .countdown-timer {
+                font-size: 0.75rem;
+                padding: 3px 6px;
+            }
         }
         @media (min-width: 768px) {
             .grid {
@@ -589,14 +605,13 @@
 
     <div class="container mx-auto p-6 pt-2">
         <!-- Order Confirmation -->
-        <!-- Added a hidden input to store delivery time in seconds -->
-        <!-- Pass delivery_time_seconds from Flask ONLY for a NEW order -->
-        <!-- For historical orders, pass 0 or omit the value -->
-        <input type="hidden" id="deliveryTimeSeconds" value="{{ delivery_time_seconds | default('') }}">
+        <!-- Hidden inputs for order ID and order count -->
+        <input type="hidden" id="currentOrderId" value="{{ order_id | default('') }}">
+        <input type="hidden" id="orderCount" value="{{ order_items | length }}">
 
         <div id="orderConfirmationSection" class="section bg-white shadow-sm rounded-xl p-6 mb-6 order-confirmed hidden" role="alert">
             <h1 class="text-center text-2xl font-bold text-orange-500">Order Confirmed!</h1>
-            <p class="text-center text-gray-600 mt-2">Estimated delivery time: <span id="countdownTimer"></span></p>
+            <p class="text-center text-gray-600 mt-2">Estimated delivery time: <span id="countdownTimer" class="countdown-timer"></span></p>
         </div>
 
         <!-- Reward Status Section -->
@@ -613,7 +628,7 @@
                         <path d="M18 9H6a4 4 0 0 1 0-8h12a4 4 0 0 1 0 8Z"></path>
                     </svg>
                 </div>
-                <span class="ml-2 text-xl font-bold text-orange-500" id="currentTier">{{ current_tier }} Tier</span>
+                <span class="ml-2 text-xl font-bold text-orange-500" id="currentTier">{{ current_tier }}</span>
                 <svg id="arrowIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-600">
                     <path id="arrowPath" d="M19 9l-7 7-7-7"></path>
                 </svg>
@@ -974,7 +989,7 @@
                     ? healthBenefitsList.map(item => `<li>${item.trim()}</li>`).join('')
                     : '<li>No health benefits available.</li>';
                 funFactsUl.innerHTML = funFactsList.length
-                    ? funFactsList.map(item => `<li>${item.trim()}</li>`).join('')
+                    ? funfactsList.map(item => `<li>${item.trim()}</li>`).join('')
                     : '<li>No fun facts available.</li>';
 
                 modal.style.display = 'flex';
@@ -997,7 +1012,78 @@
             }
         }
 
-        // Set progress bar color based on points
+        // Timer logic
+        function initTimer() {
+            const orderId = document.getElementById('currentOrderId').value;
+            const orderCount = parseInt(document.getElementById('orderCount').value, 10) || 0;
+            const orderConfirmationSection = document.getElementById('orderConfirmationSection');
+            const countdownTimerSpan = document.getElementById('countdownTimer');
+
+            // Determine timer duration based on order count
+            const timerDurationSeconds = orderCount >= 3 ? 45 * 60 : 15 * 60; // 45 min for 3+ orders, 15 min otherwise
+
+            // Check if order is new and has a valid order ID
+            if (!orderId) {
+                // No valid order ID: hide confirmation section
+                orderConfirmationSection.classList.add('hidden');
+                return;
+            }
+
+            // Check if order is already delivered
+            const deliveredOrders = JSON.parse(localStorage.getItem('deliveredOrders') || '[]');
+            if (deliveredOrders.includes(orderId)) {
+                // Order is delivered: show "Delivered!" message
+                orderConfirmationSection.classList.remove('hidden');
+                countdownTimerSpan.textContent = 'Delivered!';
+                return;
+            }
+
+            // Check for existing timer in localStorage
+            let timerData = JSON.parse(localStorage.getItem('orderTimerData') || '{}');
+            let endTime = timerData[orderId] ? parseInt(timerData[orderId], 10) : null;
+
+            // If no timer exists for this order, start a new one
+            if (!endTime) {
+                endTime = Date.now() + timerDurationSeconds * 1000;
+                timerData[orderId] = endTime;
+                localStorage.setItem('orderTimerData', JSON.stringify(timerData));
+            }
+
+            // Update timer display
+            function updateTimer() {
+                const now = Date.now();
+                const timeLeftSeconds = Math.max(0, Math.floor((endTime - now) / 1000));
+
+                if (timeLeftSeconds <= 0) {
+                    // Timer expired: mark order as delivered and refresh page
+                    deliveredOrders.push(orderId);
+                    localStorage.setItem('deliveredOrders', JSON.stringify(deliveredOrders));
+                    delete timerData[orderId];
+                    localStorage.setItem('orderTimerData', JSON.stringify(timerData));
+                    orderConfirmationSection.classList.remove('hidden');
+                    countdownTimerSpan.textContent = 'Delivered!';
+                    window.location.reload(); // Refresh page on timer expiry
+                    return;
+                }
+
+                // Format time as MM:SS
+                const minutes = Math.floor(timeLeftSeconds / 60);
+                const seconds = timeLeftSeconds % 60;
+                const paddedSeconds = seconds < 10 ? '0' + seconds : seconds;
+                countdownTimerSpan.textContent = `${minutes}m ${paddedSeconds}s`;
+
+                // Show confirmation section
+                orderConfirmationSection.classList.remove('hidden');
+
+                // Schedule next update
+                setTimeout(updateTimer, 1000);
+            }
+
+            // Start timer
+            updateTimer();
+        }
+
+        // Set progress bar color based on points and initialize timer
         document.addEventListener('DOMContentLoaded', () => {
             try {
                 const progressBar = document.getElementById('progressBar');
@@ -1011,8 +1097,11 @@
                 } else {
                     progressBar.classList.add('range-200-plus');
                 }
+
+                // Initialize the timer
+                initTimer();
             } catch (e) {
-                console.error('Error setting progress bar color:', e);
+                console.error('Error during DOMContentLoaded:', e);
             }
 
             // Lazy load images with IntersectionObserver
@@ -1035,62 +1124,8 @@
                     img.classList.remove('lazyload');
                 });
             }
-
-            // Initialize the timer
-            initTimer();
         });
 
-        // Timer logic
-        function initTimer() {
-            const deliveryTimeInput = document.getElementById('deliveryTimeSeconds');
-            const orderConfirmationSection = document.getElementById('orderConfirmationSection');
-            const countdownTimerSpan = document.getElementById('countdownTimer');
-
-            // Parse the value, default to 0 if not a valid number or empty
-            let remainingSeconds = parseInt(deliveryTimeInput.value, 10) || 0;
-
-            // Check if delivery time is a valid positive number provided for a *new* order
-            if (remainingSeconds > 0) {
-                // Show the section and start the timer
-                orderConfirmationSection.classList.remove('hidden');
-                countdownTimerSpan.textContent = formatTime(remainingSeconds); // Display initial time
-
-                const timerInterval = setInterval(() => {
-                    remainingSeconds--;
-
-                    if (remainingSeconds >= 0) {
-                        countdownTimerSpan.textContent = formatTime(remainingSeconds);
-                    }
-
-                    if (remainingSeconds < 0) {
-                        clearInterval(timerInterval);
-                        countdownTimerSpan.textContent = 'Delivered!';
-                        // Keep the section visible to show the "Delivered!" message
-                        // Optional: Hide the section after a short delay if preferred
-                        /*
-                        setTimeout(() => {
-                             orderConfirmationSection.classList.add('hidden');
-                        }, 3000); // Hide after 3 seconds
-                        */
-                    }
-                }, 1000);
-            } else {
-                 // If deliveryTimeSeconds is 0 or less, or not provided
-                 // This means it's not a new order with a pending timer.
-                 // Hide the confirmation section entirely.
-                 orderConfirmationSection.classList.add('hidden');
-            }
-        }
-
-        // Helper function to format seconds into m:ss
-        function formatTime(seconds) {
-            const minutes = Math.floor(seconds / 60);
-            const remainingSeconds = seconds % 60;
-            const paddedSeconds = remainingSeconds < 10 ? '0' + remainingSeconds : remainingSeconds;
-            return `${minutes}m ${paddedSeconds}s`;
-        }
-
-
         // Close modals on outside click
         document.addEventListener('click', (e) => {
             try {