mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
♻️ Extract preview classes to own files
This commit is contained in:
Philipp Stracker
parent
933e45e6d5
commit
534e412524
8 changed files with 223 additions and 219 deletions
|
|
@ -0,0 +1,61 @@
|
||||||
|
import ApplepayButton from '../ApplepayButton';
|
||||||
|
import PreviewButton from '../../../../ppcp-button/resources/js/modules/Renderer/PreviewButton';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A single Apple Pay preview button instance.
|
||||||
|
*/
|
||||||
|
export default class ApplePayPreviewButton extends PreviewButton {
|
||||||
|
constructor( args ) {
|
||||||
|
super( args );
|
||||||
|
|
||||||
|
this.selector = `${ args.selector }ApplePay`;
|
||||||
|
this.defaultAttributes = {
|
||||||
|
button: {
|
||||||
|
type: 'pay',
|
||||||
|
color: 'black',
|
||||||
|
lang: 'en',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
createNewWrapper() {
|
||||||
|
const element = super.createNewWrapper();
|
||||||
|
element.addClass( 'ppcp-button-apm ppcp-button-applepay' );
|
||||||
|
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
createButton( buttonConfig ) {
|
||||||
|
const button = new ApplepayButton(
|
||||||
|
'preview',
|
||||||
|
null,
|
||||||
|
buttonConfig,
|
||||||
|
this.ppcpConfig
|
||||||
|
);
|
||||||
|
|
||||||
|
button.init( this.apiConfig );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Merge form details into the config object for preview.
|
||||||
|
* Mutates the previewConfig object; no return value.
|
||||||
|
* @param buttonConfig
|
||||||
|
* @param ppcpConfig
|
||||||
|
*/
|
||||||
|
dynamicPreviewConfig( buttonConfig, ppcpConfig ) {
|
||||||
|
// The Apple Pay button expects the "wrapper" to be an ID without `#` prefix!
|
||||||
|
buttonConfig.button.wrapper = buttonConfig.button.wrapper.replace(
|
||||||
|
/^#/,
|
||||||
|
''
|
||||||
|
);
|
||||||
|
|
||||||
|
// Merge the current form-values into the preview-button configuration.
|
||||||
|
if ( ppcpConfig.button ) {
|
||||||
|
buttonConfig.button.type = ppcpConfig.button.style.type;
|
||||||
|
buttonConfig.button.color = ppcpConfig.button.style.color;
|
||||||
|
buttonConfig.button.lang =
|
||||||
|
ppcpConfig.button.style?.lang ||
|
||||||
|
ppcpConfig.button.style.language;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
import PreviewButtonManager from '../../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager';
|
||||||
|
import ApplePayPreviewButton from './ApplePayPreviewButton';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Manages all Apple Pay preview buttons on this page.
|
||||||
|
*/
|
||||||
|
export default class ApplePayPreviewButtonManager extends PreviewButtonManager {
|
||||||
|
constructor() {
|
||||||
|
const args = {
|
||||||
|
methodName: 'ApplePay',
|
||||||
|
buttonConfig: window.wc_ppcp_applepay_admin,
|
||||||
|
};
|
||||||
|
|
||||||
|
super( args );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Responsible for fetching and returning the PayPal configuration object for this payment
|
||||||
|
* method.
|
||||||
|
*
|
||||||
|
* @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder.
|
||||||
|
* @return {Promise<{}>}
|
||||||
|
*/
|
||||||
|
async fetchConfig( payPal ) {
|
||||||
|
const apiMethod = payPal?.Applepay()?.config;
|
||||||
|
|
||||||
|
if ( ! apiMethod ) {
|
||||||
|
this.error(
|
||||||
|
'configuration object cannot be retrieved from PayPal'
|
||||||
|
);
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
return await apiMethod();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This method is responsible for creating a new PreviewButton instance and returning it.
|
||||||
|
*
|
||||||
|
* @param {string} wrapperId - CSS ID of the wrapper element.
|
||||||
|
* @return {ApplePayPreviewButton}
|
||||||
|
*/
|
||||||
|
createButtonInstance( wrapperId ) {
|
||||||
|
return new ApplePayPreviewButton( {
|
||||||
|
selector: wrapperId,
|
||||||
|
apiConfig: this.apiConfig,
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
import ApplepayButton from './ApplepayButton';
|
import ApplePayPreviewButtonManager from './Preview/ApplePayPreviewButtonManager';
|
||||||
import PreviewButton from '../../../ppcp-button/resources/js/modules/Renderer/PreviewButton';
|
|
||||||
import PreviewButtonManager from '../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Accessor that creates and returns a single PreviewButtonManager instance.
|
* Accessor that creates and returns a single PreviewButtonManager instance.
|
||||||
|
|
@ -14,111 +12,5 @@ const buttonManager = () => {
|
||||||
return ApplePayPreviewButtonManager.instance;
|
return ApplePayPreviewButtonManager.instance;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Manages all Apple Pay preview buttons on this page.
|
|
||||||
*/
|
|
||||||
class ApplePayPreviewButtonManager extends PreviewButtonManager {
|
|
||||||
constructor() {
|
|
||||||
const args = {
|
|
||||||
methodName: 'ApplePay',
|
|
||||||
buttonConfig: window.wc_ppcp_applepay_admin,
|
|
||||||
};
|
|
||||||
|
|
||||||
super( args );
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Responsible for fetching and returning the PayPal configuration object for this payment
|
|
||||||
* method.
|
|
||||||
*
|
|
||||||
* @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder.
|
|
||||||
* @return {Promise<{}>}
|
|
||||||
*/
|
|
||||||
async fetchConfig( payPal ) {
|
|
||||||
const apiMethod = payPal?.Applepay()?.config;
|
|
||||||
|
|
||||||
if ( ! apiMethod ) {
|
|
||||||
this.error(
|
|
||||||
'configuration object cannot be retrieved from PayPal'
|
|
||||||
);
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
|
|
||||||
return await apiMethod();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This method is responsible for creating a new PreviewButton instance and returning it.
|
|
||||||
*
|
|
||||||
* @param {string} wrapperId - CSS ID of the wrapper element.
|
|
||||||
* @return {ApplePayPreviewButton}
|
|
||||||
*/
|
|
||||||
createButtonInstance( wrapperId ) {
|
|
||||||
return new ApplePayPreviewButton( {
|
|
||||||
selector: wrapperId,
|
|
||||||
apiConfig: this.apiConfig,
|
|
||||||
} );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A single Apple Pay preview button instance.
|
|
||||||
*/
|
|
||||||
class ApplePayPreviewButton extends PreviewButton {
|
|
||||||
constructor( args ) {
|
|
||||||
super( args );
|
|
||||||
|
|
||||||
this.selector = `${ args.selector }ApplePay`;
|
|
||||||
this.defaultAttributes = {
|
|
||||||
button: {
|
|
||||||
type: 'pay',
|
|
||||||
color: 'black',
|
|
||||||
lang: 'en',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
createNewWrapper() {
|
|
||||||
const element = super.createNewWrapper();
|
|
||||||
element.addClass( 'ppcp-button-applepay' );
|
|
||||||
|
|
||||||
return element;
|
|
||||||
}
|
|
||||||
|
|
||||||
createButton( buttonConfig ) {
|
|
||||||
const button = new ApplepayButton(
|
|
||||||
'preview',
|
|
||||||
null,
|
|
||||||
buttonConfig,
|
|
||||||
this.ppcpConfig
|
|
||||||
);
|
|
||||||
|
|
||||||
button.init( this.apiConfig );
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Merge form details into the config object for preview.
|
|
||||||
* Mutates the previewConfig object; no return value.
|
|
||||||
* @param buttonConfig
|
|
||||||
* @param ppcpConfig
|
|
||||||
*/
|
|
||||||
dynamicPreviewConfig( buttonConfig, ppcpConfig ) {
|
|
||||||
// The Apple Pay button expects the "wrapper" to be an ID without `#` prefix!
|
|
||||||
buttonConfig.button.wrapper = buttonConfig.button.wrapper.replace(
|
|
||||||
/^#/,
|
|
||||||
''
|
|
||||||
);
|
|
||||||
|
|
||||||
// Merge the current form-values into the preview-button configuration.
|
|
||||||
if ( ppcpConfig.button ) {
|
|
||||||
buttonConfig.button.type = ppcpConfig.button.style.type;
|
|
||||||
buttonConfig.button.color = ppcpConfig.button.style.color;
|
|
||||||
buttonConfig.button.lang =
|
|
||||||
ppcpConfig.button.style?.lang ||
|
|
||||||
ppcpConfig.button.style.language;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize the preview button manager.
|
// Initialize the preview button manager.
|
||||||
buttonManager();
|
buttonManager();
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ class PreviewButton {
|
||||||
*/
|
*/
|
||||||
createNewWrapper() {
|
createNewWrapper() {
|
||||||
const previewId = this.selector.replace( '#', '' );
|
const previewId = this.selector.replace( '#', '' );
|
||||||
const previewClass = 'ppcp-button-apm';
|
const previewClass = 'ppcp-preview-button';
|
||||||
|
|
||||||
return jQuery( `<div id='${ previewId }' class='${ previewClass }'>` );
|
return jQuery( `<div id='${ previewId }' class='${ previewClass }'>` );
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -95,7 +95,7 @@ class PreviewButtonManager {
|
||||||
*/
|
*/
|
||||||
createDummy( wrapperId ) {
|
createDummy( wrapperId ) {
|
||||||
const elButton = document.createElement( 'div' );
|
const elButton = document.createElement( 'div' );
|
||||||
elButton.classList.add( 'ppcp-button-apm', 'ppcp-button-dummy' );
|
elButton.classList.add( 'ppcp-preview-button', 'ppcp-button-dummy' );
|
||||||
elButton.innerHTML = `<span>${
|
elButton.innerHTML = `<span>${
|
||||||
this.apiError ?? 'Not Available'
|
this.apiError ?? 'Not Available'
|
||||||
}</span>`;
|
}</span>`;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
import GooglepayButton from '../GooglepayButton';
|
||||||
|
import PreviewButton from '../../../../ppcp-button/resources/js/modules/Renderer/PreviewButton';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A single GooglePay preview button instance.
|
||||||
|
*/
|
||||||
|
export default class GooglePayPreviewButton extends PreviewButton {
|
||||||
|
constructor( args ) {
|
||||||
|
super( args );
|
||||||
|
|
||||||
|
this.selector = `${ args.selector }GooglePay`;
|
||||||
|
this.defaultAttributes = {
|
||||||
|
button: {
|
||||||
|
style: {
|
||||||
|
type: 'pay',
|
||||||
|
color: 'black',
|
||||||
|
language: 'en',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
createNewWrapper() {
|
||||||
|
const element = super.createNewWrapper();
|
||||||
|
element.addClass( 'ppcp-button-apm ppcp-button-googlepay' );
|
||||||
|
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
createButton( buttonConfig ) {
|
||||||
|
const button = new GooglepayButton(
|
||||||
|
'preview',
|
||||||
|
null,
|
||||||
|
buttonConfig,
|
||||||
|
this.ppcpConfig
|
||||||
|
);
|
||||||
|
|
||||||
|
button.init( this.apiConfig );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Merge form details into the config object for preview.
|
||||||
|
* Mutates the previewConfig object; no return value.
|
||||||
|
* @param buttonConfig
|
||||||
|
* @param ppcpConfig
|
||||||
|
*/
|
||||||
|
dynamicPreviewConfig( buttonConfig, ppcpConfig ) {
|
||||||
|
// Merge the current form-values into the preview-button configuration.
|
||||||
|
if ( ppcpConfig.button && buttonConfig.button ) {
|
||||||
|
Object.assign( buttonConfig.button.style, ppcpConfig.button.style );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
import PreviewButtonManager from '../../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager';
|
||||||
|
import GooglePayPreviewButton from './GooglePayPreviewButton';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Manages all GooglePay preview buttons on this page.
|
||||||
|
*/
|
||||||
|
export default class GooglePayPreviewButtonManager extends PreviewButtonManager {
|
||||||
|
constructor() {
|
||||||
|
const args = {
|
||||||
|
methodName: 'GooglePay',
|
||||||
|
buttonConfig: window.wc_ppcp_googlepay_admin,
|
||||||
|
};
|
||||||
|
|
||||||
|
super( args );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Responsible for fetching and returning the PayPal configuration object for this payment
|
||||||
|
* method.
|
||||||
|
*
|
||||||
|
* @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder.
|
||||||
|
* @return {Promise<{}>}
|
||||||
|
*/
|
||||||
|
async fetchConfig( payPal ) {
|
||||||
|
const apiMethod = payPal?.Googlepay()?.config;
|
||||||
|
|
||||||
|
if ( ! apiMethod ) {
|
||||||
|
this.error(
|
||||||
|
'configuration object cannot be retrieved from PayPal'
|
||||||
|
);
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
return await apiMethod();
|
||||||
|
} catch ( error ) {
|
||||||
|
if ( error.message.includes( 'Not Eligible' ) ) {
|
||||||
|
this.apiError = 'Not Eligible';
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This method is responsible for creating a new PreviewButton instance and returning it.
|
||||||
|
*
|
||||||
|
* @param {string} wrapperId - CSS ID of the wrapper element.
|
||||||
|
* @return {GooglePayPreviewButton}
|
||||||
|
*/
|
||||||
|
createButtonInstance( wrapperId ) {
|
||||||
|
return new GooglePayPreviewButton( {
|
||||||
|
selector: wrapperId,
|
||||||
|
apiConfig: this.apiConfig,
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
import GooglepayButton from './GooglepayButton';
|
import GooglePayPreviewButtonManager from './Preview/GooglePayPreviewButtonManager';
|
||||||
import PreviewButton from '../../../ppcp-button/resources/js/modules/Renderer/PreviewButton';
|
|
||||||
import PreviewButtonManager from '../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Accessor that creates and returns a single PreviewButtonManager instance.
|
* Accessor that creates and returns a single PreviewButtonManager instance.
|
||||||
|
|
@ -14,110 +12,5 @@ const buttonManager = () => {
|
||||||
return GooglePayPreviewButtonManager.instance;
|
return GooglePayPreviewButtonManager.instance;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Manages all GooglePay preview buttons on this page.
|
|
||||||
*/
|
|
||||||
class GooglePayPreviewButtonManager extends PreviewButtonManager {
|
|
||||||
constructor() {
|
|
||||||
const args = {
|
|
||||||
methodName: 'GooglePay',
|
|
||||||
buttonConfig: window.wc_ppcp_googlepay_admin,
|
|
||||||
};
|
|
||||||
|
|
||||||
super( args );
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Responsible for fetching and returning the PayPal configuration object for this payment
|
|
||||||
* method.
|
|
||||||
*
|
|
||||||
* @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder.
|
|
||||||
* @return {Promise<{}>}
|
|
||||||
*/
|
|
||||||
async fetchConfig( payPal ) {
|
|
||||||
const apiMethod = payPal?.Googlepay()?.config;
|
|
||||||
|
|
||||||
if ( ! apiMethod ) {
|
|
||||||
this.error(
|
|
||||||
'configuration object cannot be retrieved from PayPal'
|
|
||||||
);
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
return await apiMethod();
|
|
||||||
} catch ( error ) {
|
|
||||||
if ( error.message.includes( 'Not Eligible' ) ) {
|
|
||||||
this.apiError = 'Not Eligible';
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This method is responsible for creating a new PreviewButton instance and returning it.
|
|
||||||
*
|
|
||||||
* @param {string} wrapperId - CSS ID of the wrapper element.
|
|
||||||
* @return {GooglePayPreviewButton}
|
|
||||||
*/
|
|
||||||
createButtonInstance( wrapperId ) {
|
|
||||||
return new GooglePayPreviewButton( {
|
|
||||||
selector: wrapperId,
|
|
||||||
apiConfig: this.apiConfig,
|
|
||||||
} );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A single GooglePay preview button instance.
|
|
||||||
*/
|
|
||||||
class GooglePayPreviewButton extends PreviewButton {
|
|
||||||
constructor( args ) {
|
|
||||||
super( args );
|
|
||||||
|
|
||||||
this.selector = `${ args.selector }GooglePay`;
|
|
||||||
this.defaultAttributes = {
|
|
||||||
button: {
|
|
||||||
style: {
|
|
||||||
type: 'pay',
|
|
||||||
color: 'black',
|
|
||||||
language: 'en',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
createNewWrapper() {
|
|
||||||
const element = super.createNewWrapper();
|
|
||||||
element.addClass( 'ppcp-button-googlepay' );
|
|
||||||
|
|
||||||
return element;
|
|
||||||
}
|
|
||||||
|
|
||||||
createButton( buttonConfig ) {
|
|
||||||
const button = new GooglepayButton(
|
|
||||||
'preview',
|
|
||||||
null,
|
|
||||||
buttonConfig,
|
|
||||||
this.ppcpConfig
|
|
||||||
);
|
|
||||||
|
|
||||||
button.init( this.apiConfig );
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Merge form details into the config object for preview.
|
|
||||||
* Mutates the previewConfig object; no return value.
|
|
||||||
* @param buttonConfig
|
|
||||||
* @param ppcpConfig
|
|
||||||
*/
|
|
||||||
dynamicPreviewConfig( buttonConfig, ppcpConfig ) {
|
|
||||||
// Merge the current form-values into the preview-button configuration.
|
|
||||||
if ( ppcpConfig.button && buttonConfig.button ) {
|
|
||||||
Object.assign( buttonConfig.button.style, ppcpConfig.button.style );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize the preview button manager.
|
// Initialize the preview button manager.
|
||||||
buttonManager();
|
buttonManager();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue
