Skip to content

Commit aaa14b6

Browse files
jimmynjimmyn
committed
refactor: separate classic and blocks checkout CSS files
- Created monei-classic-checkout.css with all classic checkout styles - Converted all em units to px for predictable sizing (no upstream font-size dependency) - Classic checkout: CSS loaded in gateway classes' monei_scripts() methods - Blocks checkout: CSS loaded in blocks support classes' get_payment_method_script_handles() methods - Removed global CSS enqueuing from main class - now properly scoped by checkout type - Deleted monei-icons-classic.css (styles merged into monei-classic-checkout.css) - Fixed PHPStan errors: added return statement to is_request(), fixed MONEI_MAIN_FILE constant This ensures classic and blocks checkouts have completely isolated styles with no mixing.
1 parent eb53879 commit aaa14b6

11 files changed

+293
-56
lines changed

‎assets/css/monei-classic-checkout.css‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
/* Classic Checkout Styles - For WooCommerce Classic Checkout Only */
2+
#payment input[type="email"],
3+
#payment input[type="number"],
4+
#payment input[type="password"],
5+
#payment input[type="tel"],
6+
#payment input[type="text"],
7+
#payment input[type="url"] {
8+
font-size: 16px;
9+
height: 50px;
10+
}
11+
12+
label .monei-icons-cc {
13+
margin-left: 15px;
14+
margin-right: 0;
15+
padding-right: 0;
16+
max-height: 28px !important;
17+
max-width: 258px !important;
18+
}
19+
20+
label .monei-icons-multi {
21+
margin-left: 15px;
22+
margin-right: 0;
23+
padding-right: 0;
24+
max-height: 28px !important;
25+
max-width: 128px !important;
26+
}
27+
28+
label .monei-icons {
29+
margin-left: 15px;
30+
margin-right: 0;
31+
padding-right: 0;
32+
max-height: 28px !important;
33+
max-width: 80px !important;
34+
}
35+
36+
.monei-icons svg {
37+
width: auto;
38+
}
39+
40+
/* Applies to the apple/google button in classic checkout */
41+
#wc-monei-payment-request-form {
42+
border: none;
43+
padding: 0 !important;
44+
margin: 0 !important;
45+
}
46+
47+
/* Card Input Container */
48+
.monei-card-input {
49+
transition: border-color 0.2s ease;
50+
background-color: #fff;
51+
border: 1px solid hsla(0, 0%, 7%, 0.8);
52+
border-radius: 4px;
53+
box-sizing: border-box;
54+
color: #2b2d2f;
55+
font-family: inherit;
56+
font-size: 16px;
57+
height: 50px;
58+
line-height: 1;
59+
margin: 0 0 12px 0;
60+
min-height: 0;
61+
padding: 0;
62+
width: 100%;
63+
}
64+
65+
.monei-card-input.is-focused {
66+
border-color: #007cba;
67+
box-shadow: 0 0 0 1px #007cba;
68+
}
69+
70+
.monei-card-input.is-invalid {
71+
border-color: #cc1818;
72+
}
73+
74+
/* Cardholder Name Input */
75+
.monei-input {
76+
background-color: #fff;
77+
border: 1px solid hsla(0, 0%, 7%, 0.8);
78+
border-radius: 4px;
79+
box-sizing: border-box;
80+
color: #2b2d2f;
81+
font-family: inherit;
82+
font-size: 16px;
83+
height: 50px;
84+
line-height: 1;
85+
margin: 0;
86+
min-height: 0;
87+
padding: 16px 8px;
88+
width: 100%;
89+
}
90+
91+
.monei-input:focus {
92+
outline: none;
93+
border-color: #007cba;
94+
box-shadow: 0 0 0 1px #007cba;
95+
}
96+
97+
.monei-input.has-error {
98+
border-color: #cc1818;
99+
}
100+
101+
.monei-input:disabled {
102+
background-color: #f5f5f5;
103+
cursor: not-allowed;
104+
}
105+
106+
/* Payment Request Container */
107+
.monei-payment-request-container {
108+
min-height: 50px;
109+
justify-content: center;
110+
background: #fff;
111+
width: 100%;
112+
margin: 8px 0 0;
113+
}
114+
115+
/* Label Container */
116+
.monei-label-container {
117+
display: flex;
118+
align-items: center;
119+
gap: 16px;
120+
}
121+
122+
.monei-text {
123+
font-weight: 500;
124+
white-space: nowrap;
125+
}
126+
127+
.monei-card-brands {
128+
float: right;
129+
display: inline-flex;
130+
align-items: center;
131+
gap: 5px;
132+
flex-wrap: wrap;
133+
}
134+
135+
.monei-card-brands img,
136+
.card-brand-icon {
137+
height: 24px !important;
138+
width: auto !important;
139+
display: inline-block !important;
140+
margin: 0 !important;
141+
}
142+
143+
.monei-logo {
144+
display: inline-flex;
145+
align-items: center;
146+
}
147+
148+
.monei-logo img {
149+
height: 24px;
150+
width: auto;
151+
}
152+
153+
/* Fieldset */
154+
.monei-fieldset {
155+
background: none;
156+
border: none;
157+
padding: 0;
158+
margin: 0;
159+
}
160+
161+
.monei-card-fieldset {
162+
margin-top: 12px;
163+
}
164+
165+
/* Loading State */
166+
.monei-loading {
167+
text-align: center;
168+
padding: 20px;
169+
color: #666;
170+
}
171+
172+
/* Processing State */
173+
.monei-processing {
174+
opacity: 0.6;
175+
pointer-events: none;
176+
}
177+
178+
/* Animation for smooth transitions */
179+
.monei-input-container {
180+
position: relative;
181+
margin: 0 0 16px 0 !important;
182+
}
183+
184+
/* Responsive Design */
185+
@media (max-width: 480px) {
186+
187+
.monei-input,
188+
.monei-card-input {
189+
font-size: 16px;
190+
191+
/* Prevents zoom on iOS */
192+
}
193+
194+
.monei-payment-request-container {
195+
min-height: 60px;
196+
}
197+
198+
.monei-card-brands {
199+
float: none;
200+
margin-top: 5px;
201+
}
202+
203+
.monei-label-container {
204+
flex-direction: column;
205+
align-items: flex-start;
206+
gap: 5px;
207+
}
208+
}

‎assets/css/monei-icons-classic.css‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎class-woocommerce-gateway-monei.php‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,7 @@ private function is_request( $type ) {
243243
case 'frontend':
244244
return ( ! is_admin() || defined( 'DOING_AJAX' ) ) && ! defined( 'DOING_CRON' );
245245
}
246+
return false;
246247
}
247248

248249
/**
@@ -267,22 +268,9 @@ public function init() {
267268

268269
// Init action.
269270
do_action( 'woocommerce_gateway_monei_init' );
270-
wp_register_style(
271-
'monei-icons',
272-
$this->plugin_url() . '/public/css/monei-icons-classic.css',
273-
array(),
274-
filemtime( $this->plugin_path() . '/public/css/monei-icons-classic.css' ),
275-
'screen'
276-
);
277-
wp_enqueue_style( 'monei-icons' );
278-
wp_register_style(
279-
'monei-blocks-checkout-cc',
280-
WC_Monei()->plugin_url() . '/public/css/monei-blocks-checkout.css',
281-
array(),
282-
WC_Monei()->version,
283-
'all'
284-
);
285-
wp_enqueue_style( 'monei-blocks-checkout-cc' );
271+
// CSS is now enqueued by:
272+
// - Classic checkout: In gateway classes' monei_scripts() methods (monei-classic-checkout.css)
273+
// - Blocks checkout: In blocks support classes' get_payment_method_script_handles() methods (monei-blocks-checkout.css)
286274
}
287275

288276

@@ -326,7 +314,7 @@ private function get_setting_with_default( $key, $params ) {
326314
public function plugins_loaded()
327315
{
328316
add_filter('woocommerce_payment_gateways', array($this, 'add_gateways'));
329-
add_filter('plugin_action_links_' . plugin_basename(MONEI_PLUGIN_FILE), array($this, 'plugin_action_links'));
317+
add_filter('plugin_action_links_' . plugin_basename(MONEI_MAIN_FILE), array($this, 'plugin_action_links'));
330318
}
331319

332320
public function plugin_action_links($links)

‎src/Gateways/Blocks/MoneiAppleGoogleBlocksSupport.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,16 @@ public function get_payment_method_script_handles() {
5050
return array();
5151
}
5252

53+
// Register and enqueue blocks checkout CSS
54+
wp_register_style(
55+
'monei-blocks-checkout',
56+
WC_Monei()->plugin_url() . '/public/css/monei-blocks-checkout.css',
57+
array(),
58+
WC_Monei()->version,
59+
'all'
60+
);
61+
wp_enqueue_style( 'monei-blocks-checkout' );
62+
5363
wp_register_script( 'monei', 'https://js.monei.com/v2/monei.js', '', '2.0', true );
5464
wp_enqueue_script( 'monei' );
5565

‎src/Gateways/Blocks/MoneiBizumBlocksSupport.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,16 @@ public function get_payment_method_script_handles() {
3131
return array();
3232
}
3333

34+
// Register and enqueue blocks checkout CSS
35+
wp_register_style(
36+
'monei-blocks-checkout',
37+
WC_Monei()->plugin_url() . '/public/css/monei-blocks-checkout.css',
38+
array(),
39+
WC_Monei()->version,
40+
'all'
41+
);
42+
wp_enqueue_style( 'monei-blocks-checkout' );
43+
3444
$script_name = 'wc-monei-bizum-blocks-integration';
3545

3646
wp_register_script(

‎src/Gateways/Blocks/MoneiCCBlocksSupport.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,16 @@ public function get_payment_method_script_handles() {
6060
return array();
6161
}
6262

63+
// Register and enqueue blocks checkout CSS
64+
wp_register_style(
65+
'monei-blocks-checkout',
66+
WC_Monei()->plugin_url() . '/public/css/monei-blocks-checkout.css',
67+
array(),
68+
WC_Monei()->version,
69+
'all'
70+
);
71+
wp_enqueue_style( 'monei-blocks-checkout' );
72+
6373
wp_register_script( 'monei', 'https://js.monei.com/v2/monei.js', '', '2.0', true );
6474
wp_enqueue_script( 'monei' );
6575

‎src/Gateways/Blocks/MoneiMBWayBlocksSupport.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,16 @@ public function get_payment_method_script_handles() {
2424
return array();
2525
}
2626

27+
// Register and enqueue blocks checkout CSS
28+
wp_register_style(
29+
'monei-blocks-checkout',
30+
WC_Monei()->plugin_url() . '/public/css/monei-blocks-checkout.css',
31+
array(),
32+
WC_Monei()->version,
33+
'all'
34+
);
35+
wp_enqueue_style( 'monei-blocks-checkout' );
36+
2737
$script_name = 'wc-monei-mbway-blocks-integration';
2838

2939
wp_register_script(

‎src/Gateways/Blocks/MoneiMultibancoBlocksSupport.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,16 @@ public function get_payment_method_script_handles() {
2525
return array();
2626
}
2727

28+
// Register and enqueue blocks checkout CSS
29+
wp_register_style(
30+
'monei-blocks-checkout',
31+
WC_Monei()->plugin_url() . '/public/css/monei-blocks-checkout.css',
32+
array(),
33+
WC_Monei()->version,
34+
'all'
35+
);
36+
wp_enqueue_style( 'monei-blocks-checkout' );
37+
2838
$script_name = 'wc-monei-multibanco-blocks-integration';
2939

3040
wp_register_script(

‎src/Gateways/Blocks/MoneiPaypalBlocksSupport.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,16 @@ public function get_payment_method_script_handles() {
2525
return array();
2626
}
2727

28+
// Register and enqueue blocks checkout CSS
29+
wp_register_style(
30+
'monei-blocks-checkout',
31+
WC_Monei()->plugin_url() . '/public/css/monei-blocks-checkout.css',
32+
array(),
33+
WC_Monei()->version,
34+
'all'
35+
);
36+
wp_enqueue_style( 'monei-blocks-checkout' );
37+
2838
$script_name = 'wc-monei-paypal-blocks-integration';
2939

3040
wp_register_script(

0 commit comments

Comments
 (0)