engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Enhance payment settings UX with consistent styling and persistent state

Browse source 
- 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>
This commit is contained in:
Russell Ballestrini 2025-10-04 12:37:32 -04:00
parent fd3ffc26f0
commit baa8dffc02
2 changed files with 67 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

27
make_post_sell/static/css/common.css
View file

@ -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;
}

61
make_post_sell/templates/shop_settings.j2
View file

@ -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 -%}