From baa8dffc02496f8cf4579730a5700129be4dc244 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Sat, 4 Oct 2025 12:37:32 -0400
Subject: [PATCH] Enhance payment settings UX with consistent styling and
 persistent state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add new payment-toggle-button CSS class derived from comment button styles
- Apply consistent styling to all Stripe, Monero, and Dogecoin disable/re-enable buttons
- Consolidate crypto wallet disclaimers into single always-visible section
- Update help text to clarify re-enabling payments allows address updates
- Implement localStorage persistence for both crypto and Stripe toggle states
- Ensure graceful degradation for non-JavaScript users
- Remove redundant disclaimer text from individual currency forms

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 make_post_sell/static/css/common.css      | 27 ++++++++++
 make_post_sell/templates/shop_settings.j2 | 61 +++++++++++++++--------
 2 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index 7441b55..f5aea46 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -342,6 +342,33 @@ button.mps-button-red {
     box-sizing: border-box;
 }
 
+.payment-toggle-button {
+    display: inline-block;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: #f9f9f9;
+    color: #333;
+    font-size: 14px;
+    cursor: pointer;
+    margin: 0;
+    text-decoration: none;
+    vertical-align: top;
+    box-sizing: border-box;
+}
+
+.payment-toggle-button.enable {
+    background: #4a4;
+    color: white;
+    border-color: #4a4;
+}
+
+.payment-toggle-button.disable {
+    background: #d44;
+    color: white;
+    border-color: #d44;
+}
+
 a.product-edit-button {
     background-color: #98b6fa;
 }
diff --git a/make_post_sell/templates/shop_settings.j2 b/make_post_sell/templates/shop_settings.j2
index fa941c2..a121e4b 100644
--- a/make_post_sell/templates/shop_settings.j2
+++ b/make_post_sell/templates/shop_settings.j2
@@ -170,9 +170,9 @@
 
       {% if request.shop.stripe_enabled %}
         <input type="submit" name="submit" class="mps-submit" value="Save Stripe Settings" />
-        <input type="submit" name="disable_stripe" class="mps-submit" value="Disable Stripe" style="background: #d44; color: white;" />
+        <input type="submit" name="disable_stripe" class="payment-toggle-button disable" value="Disable Stripe" />
       {% else %}
-        <input type="submit" name="submit" class="mps-submit" value="Re-enable Stripe" style="background: #4a4;" />
+        <input type="submit" name="submit" class="payment-toggle-button enable" value="Re-enable Stripe" />
         <small style="color: #666;">Enter your API keys to re-enable Stripe payments</small>
       {% endif %}
 
@@ -271,6 +271,8 @@
     <small style="color: #666;">
       Note: We cannot verify you control these addresses. Please double-check they're correct!
       Consider sending a small test amount from another wallet to verify.
+      <br />
+      <strong>Once set, cold wallet addresses cannot be removed, only replaced with new addresses.</strong>
     </small>
     
     <br />
@@ -297,7 +299,6 @@
       <br />
       <small>
         Configure your cold wallet address where this shop's Monero funds will be swept. This is required to accept Monero payments.
-        {% if xmr_processor and xmr_processor.sweep_to_address %}<br /><strong>Note: Once set, the cold wallet address cannot be removed, only replaced with a new address.</strong>{% endif %}
       </small>
       
       {% if xmr_processor %}
@@ -322,10 +323,10 @@
       {% if xmr_processor %}
         {% if xmr_processor.enabled %}
           <input type="submit" name="submit" class="mps-submit" value="Save Monero Settings" />
-          <input type="submit" name="disable" class="mps-submit" value="Disable Monero" style="background: #d44; color: white;" />
+          <input type="submit" name="disable" class="payment-toggle-button disable" value="Disable Monero" />
         {% else %}
-          <input type="submit" name="submit" class="mps-submit" value="Re-enable Monero" style="background: #4a4;" />
-          <small style="color: #666;">Enter your cold wallet address to re-enable Monero payments</small>
+          <input type="submit" name="submit" class="payment-toggle-button enable" value="Re-enable Monero" />
+          <small style="color: #666;">Re-enable Monero payments to update your cold wallet address</small>
         {% endif %}
       {% else %}
       <input type="submit" name="submit" class="mps-submit" value="Enable Monero Payments" />
@@ -356,7 +357,6 @@
       <br/>
       <small>
         Configure your cold wallet address where this shop's Dogecoin funds will be swept. This is required to accept Dogecoin payments.
-        {% if doge_processor and doge_processor.sweep_to_address %}<br /><strong>Note: Once set, the cold wallet address cannot be removed, only replaced with a new address.</strong>{% endif %}
       </small>
 
       {% if doge_processor %}
@@ -386,10 +386,10 @@
       {% if doge_processor %}
         {% if doge_processor.enabled %}
           <input type="submit" name="submit" class="mps-submit" value="Save Dogecoin Settings" />
-          <input type="submit" name="disable" class="mps-submit" value="Disable Dogecoin" style="background: #d44; color: white;" />
+          <input type="submit" name="disable" class="payment-toggle-button disable" value="Disable Dogecoin" />
         {% else %}
-          <input type="submit" name="submit" class="mps-submit" value="Re-enable Dogecoin" style="background: #d4a574;" />
-          <small style="color: #666;">Enter your cold wallet address to re-enable Dogecoin payments</small>
+          <input type="submit" name="submit" class="payment-toggle-button enable" value="Re-enable Dogecoin" />
+          <small style="color: #666;">Re-enable Dogecoin payments to update your cold wallet address</small>
         {% endif %}
       {% else %}
       <input type="submit" name="submit" class="mps-submit" value="Enable Dogecoin Payments" />
@@ -600,24 +600,23 @@ Existing sales honored for download buy purchasers.
 
 
 <script>
-// Hide crypto wallets and Stripe keys by default when JavaScript is enabled
+// Use localStorage to remember toggle states across page refreshes
 document.addEventListener('DOMContentLoaded', function() {
     const cryptoCheckbox = document.getElementById('show-crypto-wallets');
     const cryptoWallets = document.getElementById('crypto-wallets');
-    
-    // Always uncheck the checkbox on page load/refresh
-    cryptoCheckbox.checked = false;
-    
-    // Hide the wallets section
-    cryptoWallets.style.display = 'none';
-    
-    // Handle Stripe toggle - hide by default and uncheck
     const stripeToggle = document.getElementById('toggle-stripe');
     const stripeControls = document.querySelector('#toggle-stripe ~ .hidden-control');
     
+    // Restore crypto wallet toggle state from localStorage
+    const cryptoState = localStorage.getItem('show-crypto-wallets') === 'true';
+    cryptoCheckbox.checked = cryptoState;
+    cryptoWallets.style.display = cryptoState ? 'block' : 'none';
+    
+    // Restore Stripe toggle state from localStorage
     if (stripeToggle && stripeControls) {
-        stripeToggle.checked = false;
-        stripeControls.style.display = 'none';
+        const stripeState = localStorage.getItem('show-stripe-keys') === 'true';
+        stripeToggle.checked = stripeState;
+        stripeControls.style.display = stripeState ? 'block' : 'none';
     }
 });
 
@@ -625,12 +624,32 @@ function toggleCryptoWallets() {
     const checkbox = document.getElementById('show-crypto-wallets');
     const wallets = document.getElementById('crypto-wallets');
     
+    // Save state to localStorage
+    localStorage.setItem('show-crypto-wallets', checkbox.checked);
+    
     if (checkbox.checked) {
         wallets.style.display = 'block';
     } else {
         wallets.style.display = 'none';
     }
 }
+
+// Add onchange handler for Stripe toggle to save state
+document.addEventListener('DOMContentLoaded', function() {
+    const stripeToggle = document.getElementById('toggle-stripe');
+    if (stripeToggle) {
+        stripeToggle.addEventListener('change', function() {
+            const stripeControls = document.querySelector('#toggle-stripe ~ .hidden-control');
+            
+            // Save state to localStorage
+            localStorage.setItem('show-stripe-keys', this.checked);
+            
+            if (stripeControls) {
+                stripeControls.style.display = this.checked ? 'block' : 'none';
+            }
+        });
+    }
+});
 </script>
 
 {%- endblock -%}