🐛 Fix general preview button shape

This commit is contained in:
Philipp Stracker 2024-07-15 13:16:08 +02:00
parent c780b025a3
commit 7f9cbd6f58
No known key found for this signature in database
3 changed files with 24 additions and 3 deletions

View file

@ -216,6 +216,7 @@ class ApplepayButton {
}
const $wrapper = jQuery( '#' + wrapper );
$wrapper.removeClass( 'ppcp-button-rect ppcp-button-pill' );
$wrapper.addClass( 'ppcp-button-' + ppcpStyle.shape );
if ( ppcpStyle.height ) {

View file

@ -26,6 +26,23 @@ export default class DummyPreviewButton extends PreviewButton {
this.#innerEl = document.createElement( 'div' );
this.#innerEl.innerHTML = `<div class="reason">${ this.label }</div>`;
this._applyShape( this.ppcpConfig?.button?.style?.shape );
this.domWrapper.appendChild( this.#innerEl );
}
/**
* Applies the button shape (rect/pill) to the dummy button
*
* @param {string|null} shape
* @private
*/
_applyShape( shape = 'rect' ) {
this.domWrapper.classList.remove(
'ppcp-button-pill',
'ppcp-button-rect'
);
this.domWrapper.classList.add( `ppcp-button-${ shape }` );
}
}

View file

@ -202,10 +202,13 @@ class GooglepayButton {
const { wrapper, ppcpStyle, buttonStyle } = this.contextConfig();
this.waitForWrapper( wrapper, () => {
jQuery( wrapper ).addClass( 'ppcp-button-' + ppcpStyle.shape );
const $wrapper = jQuery( wrapper );
$wrapper.removeClass( 'ppcp-button-rect ppcp-button-pill' );
$wrapper.addClass( 'ppcp-button-' + ppcpStyle.shape );
if ( ppcpStyle.height ) {
jQuery( wrapper ).css( 'height', `${ ppcpStyle.height }px` );
$wrapper.css( 'height', `${ ppcpStyle.height }px` );
}
const button = this.paymentsClient.createButton( {
@ -217,7 +220,7 @@ class GooglepayButton {
buttonSizeMode: 'fill',
} );
jQuery( wrapper ).append( button );
$wrapper.append( button );
} );
}