Update templates/cart.html

templates/cart.html

@@ -81,10 +81,8 @@
             margin-top: 20px;
             text-align: right;
         }
-        .apply-coupon input {
-            width: 200px;
-            padding: 5px;
-            margin-right: 10px;
+        .apply-coupon select, .apply-coupon button {
+            font-size: 1rem;
         }
         .apply-coupon button {
             background-color: #28a745;
@@ -92,7 +90,6 @@
             padding: 5px 15px;
             border: none;
             cursor: pointer;
-            font-size: 1rem;
         }
         .apply-coupon button:hover {
             background-color: #218838;
@@ -149,7 +146,12 @@
             <!-- Apply Coupon Section -->
             <div class="apply-coupon">
                 <label for="coupon-code">Coupon Code:</label>
-                <input type="text" id="coupon-code" name="coupon_code" placeholder="Coupon code will appear here" readonly>
+                <select id="coupon-code" name="coupon_code">
+                    <option value="">Select a coupon code</option>
+                    {% for coupon in coupon_codes %}
+                    <option value="{{ coupon.Coupon_Code__c }}">{{ coupon.Coupon_Code__c }}</option>
+                    {% endfor %}
+                </select>
                 <button type="button" onclick="applyCoupon()">Apply Coupon</button>
                 <p id="coupon-message" class="coupon-message"></p>
             </div>
@@ -163,23 +165,29 @@
     </div>
 
     <script>
-        // Fetch coupon code automatically when the page loads
+        // Fetch coupon codes automatically when the page loads
         document.addEventListener("DOMContentLoaded", function() {
             const customerEmail = "{{ customer_email }}"; // The email stored in the session
 
             if (customerEmail) {
-                fetch(`/get_coupon_code?email=${customerEmail}`)
+                fetch(`/get_coupon_codes?email=${customerEmail}`)
                     .then(response => response.json())
                     .then(data => {
-                        if (data.success && data.coupon_code) {
-                            document.getElementById('coupon-code').value = data.coupon_code; // Set coupon code in the input
+                        if (data.success && data.coupon_codes) {
+                            const couponSelect = document.getElementById('coupon-code');
+                            data.coupon_codes.forEach(coupon => {
+                                const option = document.createElement('option');
+                                option.value = coupon.Coupon_Code__c;
+                                option.textContent = coupon.Coupon_Code__c;
+                                couponSelect.appendChild(option);
+                            });
                         } else {
-                            document.getElementById('coupon-message').innerText = "No coupon found for your account.";
+                            document.getElementById('coupon-message').innerText = "No active coupons found for your account.";
                             document.getElementById('coupon-message').style.color = "red";
                         }
                     })
                     .catch(error => {
-                        console.error('Error fetching coupon code:', error);
+                        console.error('Error fetching coupon codes:', error);
                     });
             }
         });
@@ -218,7 +226,7 @@
                     couponMessage.style.color = 'red';
                 });
             } else {
-                couponMessage.innerText = 'Please enter a coupon code.';
+                couponMessage.innerText = 'Please select a coupon code.';
                 couponMessage.style.color = 'red';
             }
         }