Skip to content

Commit 9dee728

Browse files
kilbotkilbot
committed
Improve button UI
1 parent 5e18a33 commit 9dee728

3 files changed

Lines changed: 79 additions & 35 deletions

File tree

‎assets/js/fee-manager.js‎

Lines changed: 58 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,32 @@ jQuery(document).ready(function($) {
1111
var $checkoutForm = $('form.checkout');
1212

1313
// Restore selected payment method after reload
14+
// Use a slight delay to ensure WooCommerce payment scripts have initialized
1415
var savedPayment = sessionStorage.getItem('wcpos_selected_payment');
1516
if (savedPayment) {
16-
var $savedRadio = $('input[name="payment_method"][value="' + savedPayment + '"]');
17-
if ($savedRadio.length) {
18-
$savedRadio.prop('checked', true).trigger('change');
19-
}
20-
sessionStorage.removeItem('wcpos_selected_payment');
17+
setTimeout(function() {
18+
var $savedRadio = $('input[name="payment_method"][value="' + savedPayment + '"]');
19+
if ($savedRadio.length) {
20+
// Check the radio button
21+
$savedRadio.prop('checked', true);
22+
23+
// Hide all payment boxes first
24+
$('.payment_box').hide();
25+
26+
// Show the selected payment method's box
27+
var $paymentBox = $('.payment_box.payment_method_' + savedPayment);
28+
if ($paymentBox.length) {
29+
$paymentBox.show();
30+
} else {
31+
// Fallback: find parent li and show its payment_box
32+
$savedRadio.closest('li').find('.payment_box').show();
33+
}
34+
35+
// Trigger change event for any other listeners
36+
$savedRadio.trigger('change');
37+
}
38+
sessionStorage.removeItem('wcpos_selected_payment');
39+
}, 150);
2140
}
2241

2342
/**
@@ -94,34 +113,38 @@ jQuery(document).ready(function($) {
94113
},
95114
success: function(response) {
96115
if (response.success) {
97-
// Show success message
98-
if (response.data && response.data.message) {
99-
showNotice(response.data.message, 'success');
100-
}
101-
102116
// If reload flag is set, reload the page
103117
if (response.data && response.data.reload) {
118+
// Update button to show reloading state
119+
$button.text('Reloading page...').css('opacity', '0.7');
120+
104121
// Store selected payment method before reload
105122
var selectedPayment = $('input[name="payment_method"]:checked').val();
106123
if (selectedPayment) {
107124
sessionStorage.setItem('wcpos_selected_payment', selectedPayment);
108125
}
109126

127+
// Reload immediately
110128
setTimeout(function() {
111129
window.location.reload();
112-
}, 1000);
130+
}, 500);
113131
} else {
114132
// Otherwise update UI without reload
115133
$button.hide();
116134
$removeButton.show();
117135

118-
// Update status text
119136
if ($status.length) {
120137
$status.html(wcpos_ccf.fee_percentage + '% fee applied');
121138
}
122139

123-
// Force checkout refresh
140+
if (response.data && response.data.message) {
141+
showNotice(response.data.message, 'success');
142+
}
143+
124144
forceCheckoutRefresh();
145+
146+
// Re-enable button
147+
$button.prop('disabled', false).text('Add credit card fee');
125148
}
126149
} else {
127150
// Handle error response
@@ -130,6 +153,9 @@ jQuery(document).ready(function($) {
130153
errorMsg = response.data.message;
131154
}
132155
showNotice(errorMsg, 'error');
156+
157+
// Re-enable button on error
158+
$button.prop('disabled', false).text('Add credit card fee');
133159
}
134160
},
135161
error: function(xhr) {
@@ -138,9 +164,8 @@ jQuery(document).ready(function($) {
138164
message = xhr.responseJSON.data.message;
139165
}
140166
showNotice(message, 'error');
141-
},
142-
complete: function() {
143-
// Re-enable button and restore text
167+
168+
// Re-enable button on error
144169
$button.prop('disabled', false).text('Add credit card fee');
145170
}
146171
});
@@ -182,34 +207,38 @@ jQuery(document).ready(function($) {
182207
},
183208
success: function(response) {
184209
if (response.success) {
185-
// Show success message
186-
if (response.data && response.data.message) {
187-
showNotice(response.data.message, 'success');
188-
}
189-
190210
// If reload flag is set, reload the page
191211
if (response.data && response.data.reload) {
212+
// Update button to show reloading state
213+
$button.text('Reloading page...').css('opacity', '0.7');
214+
192215
// Store selected payment method before reload
193216
var selectedPayment = $('input[name="payment_method"]:checked').val();
194217
if (selectedPayment) {
195218
sessionStorage.setItem('wcpos_selected_payment', selectedPayment);
196219
}
197220

221+
// Reload immediately
198222
setTimeout(function() {
199223
window.location.reload();
200-
}, 1000);
224+
}, 500);
201225
} else {
202226
// Otherwise update UI without reload
203227
$button.hide();
204228
$addButton.show();
205229

206-
// Clear status text
207230
if ($status.length) {
208231
$status.html('');
209232
}
210233

211-
// Force checkout refresh
234+
if (response.data && response.data.message) {
235+
showNotice(response.data.message, 'success');
236+
}
237+
212238
forceCheckoutRefresh();
239+
240+
// Re-enable button
241+
$button.prop('disabled', false).text('Remove credit card fee');
213242
}
214243
} else {
215244
// Handle error response
@@ -218,6 +247,9 @@ jQuery(document).ready(function($) {
218247
errorMsg = response.data.message;
219248
}
220249
showNotice(errorMsg, 'error');
250+
251+
// Re-enable button on error
252+
$button.prop('disabled', false).text('Remove credit card fee');
221253
}
222254
},
223255
error: function(xhr) {
@@ -226,9 +258,8 @@ jQuery(document).ready(function($) {
226258
message = xhr.responseJSON.data.message;
227259
}
228260
showNotice(message, 'error');
229-
},
230-
complete: function() {
231-
// Re-enable button and restore text
261+
262+
// Re-enable button on error
232263
$button.prop('disabled', false).text('Remove credit card fee');
233264
}
234265
});

‎readme.txt‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Tags: woocommerce, payment, fees, pos, credit card
44
Requires at least: 5.0
55
Tested up to: 6.4
66
Requires PHP: 7.2
7-
Stable tag: 0.0.2
7+
Stable tag: 0.0.3
88
License: GPLv2 or later
99
License URI: http://www.gnu.org/licenses/gpl-2.0.html
1010

@@ -40,6 +40,9 @@ To change the fee percentage, edit the following line in the main plugin file:
4040

4141
== Changelog ==
4242

43+
= 0.0.3 =
44+
* Improve button UI
45+
4346
= 0.0.2 =
4447
* Add GATEWAY_ID variable, default to 'stripe_terminal_for_woocommerce'
4548

‎woocommerce-pos-credit-card-fee.php‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* Plugin Name: WooCommerce POS Credit Card Fee
55
* Plugin URI: https://wcpos.com/
66
* Description: Adds credit card fee management buttons to a WooCommerce payment gateway
7-
* Version: 0.0.2
7+
* Version: 0.0.3
88
* Author: kilbot
99
* License: GPL v2 or later
1010
* Text Domain: wcpos-ccf
@@ -22,6 +22,7 @@
2222
define('WCPOS\WooCommercePOS\CreditCardFee\PLUGIN_PATH', plugin_dir_path(__FILE__));
2323
define('WCPOS\WooCommercePOS\CreditCardFee\FEE_PERCENTAGE', 3); // 3% fee
2424
define('WCPOS\WooCommercePOS\CreditCardFee\GATEWAY_ID', 'stripe_terminal_for_woocommerce');
25+
define('WCPOS\WooCommercePOS\CreditCardFee\PLUGIN_VERSION', '0.0.3');
2526

2627
/**
2728
* Main plugin class
@@ -77,17 +78,26 @@ public function add_fee_buttons_to_description($description, $gateway_id)
7778

7879
$has_fee = \WC()->session->get('wcpos_add_credit_card_fee');
7980

80-
// Build the buttons HTML
81-
$buttons_html = '<div class="wcpos-ccf-buttons" style="margin-top: 15px;">';
82-
$buttons_html .= '<button type="button" class="button wcpos-add-cc-fee-btn"' . ($has_fee ? ' style="display:none;"' : '') . '>';
81+
// Build the buttons HTML with inline styles
82+
$buttons_html = '<div class="wcpos-ccf-buttons" style="margin-top:15px;padding:15px;background:#f7f7f7;border-radius:4px;border:1px solid #e0e0e0;">';
83+
84+
// Add fee button
85+
$add_display = $has_fee ? 'display:none;' : '';
86+
$add_disabled = $has_fee ? ' disabled' : '';
87+
$buttons_html .= '<button type="button" class="button wcpos-add-cc-fee-btn"' . $add_disabled . ' style="' . $add_display . 'background:#2271b1;color:#fff;border:none;padding:10px 20px;font-size:14px;font-weight:500;border-radius:4px;cursor:pointer;transition:all 0.2s ease;">';
8388
$buttons_html .= esc_html__('Add credit card fee', 'wcpos-ccf');
8489
$buttons_html .= '</button>';
85-
$buttons_html .= '<button type="button" class="button wcpos-remove-cc-fee-btn"' . (!$has_fee ? ' style="display:none;"' : '') . '>';
90+
91+
// Remove fee button
92+
$remove_display = !$has_fee ? 'display:none;' : '';
93+
$remove_disabled = !$has_fee ? ' disabled' : '';
94+
$buttons_html .= '<button type="button" class="button wcpos-remove-cc-fee-btn"' . $remove_disabled . ' style="' . $remove_display . 'background:#dc3232;color:#fff;border:none;padding:10px 20px;font-size:14px;font-weight:500;border-radius:4px;cursor:pointer;transition:all 0.2s ease;margin-left:10px;">';
8695
$buttons_html .= esc_html__('Remove credit card fee', 'wcpos-ccf');
8796
$buttons_html .= '</button>';
8897

98+
// Status badge
8999
if ($has_fee) {
90-
$buttons_html .= '<span class="wcpos-fee-status" style="margin-left: 10px; font-weight: bold; color: #2271b1;">';
100+
$buttons_html .= '<span class="wcpos-fee-status" style="display:inline-block;margin-left:10px;padding:8px 12px;background:#d4edda;color:#155724;border-radius:4px;font-weight:600;font-size:13px;border:1px solid #c3e6cb;">';
91101
$buttons_html .= sprintf(esc_html__('%d%% fee applied', 'wcpos-ccf'), FEE_PERCENTAGE);
92102
$buttons_html .= '</span>';
93103
}
@@ -123,7 +133,7 @@ public function enqueue_scripts()
123133
'wcpos-credit-card-fee',
124134
PLUGIN_URL . 'assets/js/fee-manager.js',
125135
array('jquery', 'wc-checkout'),
126-
'0.0.1',
136+
PLUGIN_VERSION,
127137
true
128138
);
129139

0 commit comments

Comments
 (0)