woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Refactor: extract logic to corresponding modules

Browse source
This commit is contained in:
Emili Castells Guasch 2024-07-26 15:39:25 +02:00
parent c4232e3957
commit 9f18f2e899
13 changed files with 2549 additions and 451 deletions
Download patch file Download diff file Expand all files Collapse all files

55
modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js
View file

@ -173,61 +173,6 @@ class CheckoutActionHandler {
},
};
}
addPaymentMethodConfiguration() {
return {
createVaultSetupToken: async () => {
const response = await fetch(
this.config.ajax.create_setup_token.endpoint,
{
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify( {
nonce: this.config.ajax.create_setup_token.nonce,
} ),
}
);
const result = await response.json();
if ( result.data.id ) {
return result.data.id;
}
console.error( result );
},
onApprove: async ( { vaultSetupToken } ) => {
const response = await fetch(
this.config.ajax.create_payment_token_for_guest.endpoint,
{
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify( {
nonce: this.config.ajax
.create_payment_token_for_guest.nonce,
vault_setup_token: vaultSetupToken,
} ),
}
);
const result = await response.json();
if ( result.success === true ) {
document.querySelector( '#place_order' ).click();
return;
}
console.error( result );
},
onError: ( error ) => {
console.error( error );
},
};
}
}
export default CheckoutActionHandler;

3
modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
View file

@ -7,6 +7,7 @@ import {
PaymentMethods,
} from '../Helper/CheckoutMethodState';
import BootstrapHelper from '../Helper/BootstrapHelper';
import { addPaymentMethodConfiguration } from '../../../../../ppcp-save-payment-methods/resources/js/Configuration';
class CheckoutBootstap {
constructor( gateway, renderer, spinner, errorHandler ) {
@ -160,7 +161,7 @@ class CheckoutBootstap {
PayPalCommerceGateway.vault_v3_enabled
) {
this.renderer.render(
actionHandler.addPaymentMethodConfiguration(),
addPaymentMethodConfiguration( PayPalCommerceGateway ),
{},
actionHandler.configuration()
);

50
modules/ppcp-button/resources/js/modules/Helper/CardFieldsHelper.js
View file

@ -1,50 +0,0 @@
export const cardFieldStyles = ( field ) => {
const allowedProperties = [
'appearance',
'color',
'direction',
'font',
'font-family',
'font-size',
'font-size-adjust',
'font-stretch',
'font-style',
'font-variant',
'font-variant-alternates',
'font-variant-caps',
'font-variant-east-asian',
'font-variant-ligatures',
'font-variant-numeric',
'font-weight',
'letter-spacing',
'line-height',
'opacity',
'outline',
'padding',
'padding-bottom',
'padding-left',
'padding-right',
'padding-top',
'text-shadow',
'transition',
'-moz-appearance',
'-moz-osx-font-smoothing',
'-moz-tap-highlight-color',
'-moz-transition',
'-webkit-appearance',
'-webkit-osx-font-smoothing',
'-webkit-tap-highlight-color',
'-webkit-transition',
];
const stylesRaw = window.getComputedStyle( field );
const styles = {};
Object.values( stylesRaw ).forEach( ( prop ) => {
if ( ! stylesRaw[ prop ] || ! allowedProperties.includes( prop ) ) {
return;
}
styles[ prop ] = '' + stylesRaw[ prop ];
} );
return styles;
};

26
modules/ppcp-button/resources/js/modules/Renderer/CardFieldsFreeTrialRenderer.js
View file

@ -1,7 +1,9 @@
import { show } from '../Helper/Hiding';
import ErrorHandler from '../ErrorHandler';
import RenderCardFields from '../../../../../ppcp-save-payment-methods/resources/js/RenderCardFields';
import Configuration from '../../../../../ppcp-save-payment-methods/resources/js/Configuration';
import { renderFields } from '../../../../../ppcp-card-fields/resources/js/Render';
import {
addPaymentMethodConfiguration,
cardFieldsConfiguration,
} from '../../../../../ppcp-save-payment-methods/resources/js/Configuration';
class CardFieldsFreeTrialRenderer {
constructor( defaultConfig, errorHandler, spinner ) {
@ -37,29 +39,19 @@ class CardFieldsFreeTrialRenderer {
hideDccGateway.parentNode.removeChild( hideDccGateway );
}
const errorHandler = new ErrorHandler(
this.defaultConfig.labels.error.generic,
document.querySelector( '.woocommerce-notices-wrapper' )
);
errorHandler.clear();
const configuration = new Configuration(
this.defaultConfig,
errorHandler
);
this.errorHandler.clear();
let cardFields = paypal.CardFields(
configuration.addPaymentMethodConfiguration()
addPaymentMethodConfiguration( this.defaultConfig )
);
if ( this.defaultConfig.user.is_logged ) {
cardFields = paypal.CardFields(
configuration.cardFieldsConfiguration()
cardFieldsConfiguration( this.defaultConfig, this.errorHandler )
);
}
if ( cardFields.isEligible() ) {
const renderCardFields = new RenderCardFields( cardFields );
renderCardFields.render();
renderFields( cardFields );
}
gateWayBox.style.display = oldDisplayStyle;

81
modules/ppcp-button/resources/js/modules/Renderer/CardFieldsRenderer.js
View file

@ -1,5 +1,5 @@
import { show } from '../Helper/Hiding';
import { cardFieldStyles } from '../Helper/CardFieldsHelper';
import { renderFields } from '../../../../../ppcp-card-fields/resources/js/Render';
class CardFieldsRenderer {
constructor(
@ -45,7 +45,7 @@ class CardFieldsRenderer {
hideDccGateway.parentNode.removeChild( hideDccGateway );
}
const cardField = paypal.CardFields( {
const cardFields = paypal.CardFields( {
createOrder: contextConfig.createOrder,
onApprove( data ) {
return contextConfig.onApprove( data );
@ -56,79 +56,8 @@ class CardFieldsRenderer {
},
} );
if ( cardField.isEligible() ) {
const nameField = document.getElementById(
'ppcp-credit-card-gateway-card-name'
);
if ( nameField ) {
const styles = cardFieldStyles( nameField );
const fieldOptions = {
style: { input: styles },
};
if ( nameField.getAttribute( 'placeholder' ) ) {
fieldOptions.placeholder =
nameField.getAttribute( 'placeholder' );
}
cardField
.NameField( fieldOptions )
.render( nameField.parentNode );
nameField.remove();
}
const numberField = document.getElementById(
'ppcp-credit-card-gateway-card-number'
);
if ( numberField ) {
const styles = cardFieldStyles( numberField );
const fieldOptions = {
style: { input: styles },
};
if ( numberField.getAttribute( 'placeholder' ) ) {
fieldOptions.placeholder =
numberField.getAttribute( 'placeholder' );
}
cardField
.NumberField( fieldOptions )
.render( numberField.parentNode );
numberField.remove();
}
const expiryField = document.getElementById(
'ppcp-credit-card-gateway-card-expiry'
);
if ( expiryField ) {
const styles = cardFieldStyles( expiryField );
const fieldOptions = {
style: { input: styles },
};
if ( expiryField.getAttribute( 'placeholder' ) ) {
fieldOptions.placeholder =
expiryField.getAttribute( 'placeholder' );
}
cardField
.ExpiryField( fieldOptions )
.render( expiryField.parentNode );
expiryField.remove();
}
const cvvField = document.getElementById(
'ppcp-credit-card-gateway-card-cvc'
);
if ( cvvField ) {
const styles = cardFieldStyles( cvvField );
const fieldOptions = {
style: { input: styles },
};
if ( cvvField.getAttribute( 'placeholder' ) ) {
fieldOptions.placeholder =
cvvField.getAttribute( 'placeholder' );
}
cardField
.CVVField( fieldOptions )
.render( cvvField.parentNode );
cvvField.remove();
}
if ( cardFields.isEligible() ) {
renderFields( cardFields );
document.dispatchEvent( new CustomEvent( 'hosted_fields_loaded' ) );
}
@ -169,7 +98,7 @@ class CardFieldsRenderer {
return;
}
cardField.submit().catch( ( error ) => {
cardFields.submit().catch( ( error ) => {
this.spinner.unblock();
console.error( error );
this.errorHandler.message(