Update app.py

app.py

@@ -46,7 +46,7 @@ custom_css = """
     width: 100%; height: 100%;
     background: rgba(0,0,0,0.6);
     z-index: 9999;
-    display: none; /* Hidden by default */
+    display: none;
     flex-direction: column;
     justify-content: center;
     align-items: center;
@@ -74,15 +74,23 @@ custom_css = """
 #nps-close:hover {
     color: black;
 }
-#nps-box button:active {
-    transform: scale(0.95);
-    background-color: #ddd;
+.nps-btn {
+    border: 1px solid #ccc;
+    background: #f9f9f9;
+    padding: 6px 10px;
+    cursor: pointer;
+    border-radius: 6px;
+}
+.nps-btn.selected {
+    background: #007bff;
+    color: white;
+    border-color: #007bff;
 }
-
 """
 
 
 
+
 with gr.Blocks() as interface:
     # with gr.Tab("CURIOUS ABOUT THIS PRODUCT?"):
     #     gr.HTML(value=pricing_html)
@@ -146,6 +154,7 @@ with gr.Blocks() as interface:
                 
                 selected_score = gr.Textbox(label="selected_score", visible=False)
                 nps_submit = gr.Button("Submit")
+                nps_message = gr.Markdown(visible=True)
 
                 
         with gr.Group(visible=False) as results_group:
@@ -396,7 +405,7 @@ with gr.Blocks() as interface:
         #       "\n".join(log_lines)
         #   )
         def submit_nps(email,nps_score):
-            if nps_score is None:
+            if not nps_score.strip():
                 return "❌ Please select a score before submitting."
             log_submission_to_gsheet(email, [], nps_score)
             return "✅ Thanks for submitting your feedback!"
@@ -1189,11 +1198,8 @@ with gr.Blocks() as interface:
             inputs=[raw_text, q1, q2, contact],
             outputs=[feedback_status]
         )
-        nps_message = gr.Markdown(visible=True)
-        #nps_button.click(fn=submit_nps, inputs=[user_email, nps_slider], outputs=nps_output)
         nps_submit.click(fn=submit_nps, inputs=[user_email, selected_score], outputs=[nps_message])
-        #nps_close.click(fn=lambda: gr.update(visible=False), outputs=[nps_modal])
-    
+        
         
         gr.HTML("""
         <style>
@@ -1279,42 +1285,35 @@ with gr.Blocks() as interface:
     with gr.Tab("PRICING"):
         gr.HTML(value=pricing_html)
 
-interface.load(js="""
-() => {
-    // Close button functionality
-    const closeBtn = document.getElementById('nps-close');
-    if (closeBtn) {
-        closeBtn.addEventListener('click', () => {
+interface.load(
+    js="""
+    () => {
+        setTimeout(() => {
             const overlay = document.getElementById('nps-overlay');
-            if (overlay) overlay.style.display = 'none';
-        });
-    }
-
-    // Handle score button clicks
-    document.querySelectorAll('.nps-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const score = btn.getAttribute('data-score');
+            const closeBtn = document.getElementById('nps-close');
+            const buttons = document.querySelectorAll('.nps-btn');
             const hiddenInput = document.querySelector('textarea[aria-label="selected_score"]');
-            if (hiddenInput) {
-                hiddenInput.value = score;
-                hiddenInput.dispatchEvent(new Event('input', { bubbles: true }));
+
+            if (closeBtn) {
+                closeBtn.onclick = () => {
+                    overlay.style.display = 'none';
+                };
             }
-        });
-    });
 
-    const submitBtn = document.querySelector('button:has-text("Submit")');
-    if (submitBtn) {
-        submitBtn.addEventListener('click', () => {
-            submitBtn.style.border = '2px solid green';
-            submitBtn.style.backgroundColor = '#e6ffe6';
-            setTimeout(() => {
-                submitBtn.style.border = '';
-                submitBtn.style.backgroundColor = '';
-            }, 300); // reset after 0.3s
-        });
+            buttons.forEach(btn => {
+                btn.onclick = () => {
+                    buttons.forEach(b => b.classList.remove('selected'));
+                    btn.classList.add('selected');
+                    if (hiddenInput) {
+                        hiddenInput.value = btn.getAttribute('data-score');
+                        hiddenInput.dispatchEvent(new Event('input', { bubbles: true }));
+                    }
+                };
+            });
+        }, 500);
     }
-}
-""")
+    """
+)