Feat(buy-now): Add button size presets and margin controls

[DevWael]

Description

This PR introduces new customization options for the "Buy Now" button within the Merchant plugin's "Buy Now" module. Users can now select from predefined button size presets (Small, Medium, Large) which automatically adjust the button's padding. Additionally, new controls for margin-top and margin-bottom have been added to provide greater flexibility in positioning the button. See #539

When users manually adjust the padding values, the button size preset will automatically switch to "Custom". The styling is dynamically applied using CSS variables, ensuring a seamless and responsive preview experience in the admin panel.

Testing Steps

1. Enable the "Buy Now" module:
   • Navigate to Merchant > Modules in the WordPress admin.
   • Enable the "Buy Now" module.
2. Access module settings:
   • Click on the "Buy Now" module to access its settings.
3. Verify new controls:
   • Ensure that the "Customize Button" option is enabled.
   • Verify the presence of the new "Button size" select field.
   • Verify the presence of "Margin top" and "Margin bottom" range sliders.
4. Test "Button size" presets:
   • Select "Small", "Medium", and "Large" from the "Button size" dropdown.
   • Observe that the "Padding Top/Bottom" and "Padding Left/Right" values automatically update in the settings fields and the button in the live preview changes accordingly.
5. Test "Custom" button size:
   • Manually change the values of "Padding Top/Bottom" or "Padding Left/Right" using their respective range sliders or number inputs.
   • Verify that the "Button size" dropdown automatically switches to "Custom".
   • Observe that the button in the live preview reflects the custom padding.
6. Test "Margin top" and "Margin bottom":
   • Adjust the "Margin top" and "Margin bottom" range sliders.
   • Observe that the button's vertical spacing in the live preview changes accordingly.
7. Save and verify on frontend:
   • Save the settings.
   • Navigate to a product page on the frontend where the "Buy Now" button is displayed.
   • Verify that the button's size, padding, and margins reflect the saved settings.
8. Check for console errors:
   • Open the browser's developer console in both the admin settings page and the frontend product page.
   • Ensure there are no JavaScript errors related to the "Buy Now" module.

[sentry]

Bug: Frontend margins default to 0px instead of 10px when settings are not explicitly saved, overriding SCSS fallbacks.
_{Severity: HIGH | Confidence: 1.00}

🔍 Detailed Analysis

When a user first enables the 'Buy Now' module and has not explicitly saved margin settings, the admin form displays 10px defaults. However, the frontend CSS generation calls Merchant_Custom_CSS::get_variable_css() with 0 as the default value for margin-top and margin-bottom. This results in the CSS variables being set to 0px, overriding the intended SCSS fallback values of 0.5rem and 1rem, leading to 0px margins on the frontend.

💡 Suggested Fix

Modify lines 513 and 516 in inc/modules/buy-now/class-buy-now.php to pass 10 instead of 0 as the default value to Merchant_Custom_CSS::get_variable_css() for margin-top and margin-bottom.

🤖 Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: inc/modules/buy-now/class-buy-now.php#L503-L520

Potential issue: When a user first enables the 'Buy Now' module and has not explicitly
saved margin settings, the admin form displays `10px` defaults. However, the frontend
CSS generation calls `Merchant_Custom_CSS::get_variable_css()` with `0` as the default
value for `margin-top` and `margin-bottom`. This results in the CSS variables being set
to `0px`, overriding the intended SCSS fallback values of `0.5rem` and `1rem`, leading
to `0px` margins on the frontend.

_{Did we get this right? 👍 / 👎 to inform future reviews.}

_{Reference_id: 2632121}