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

activate spinner when credit card button is clicked

Browse source
This commit is contained in:
David Remer 2020-09-28 14:05:02 +03:00
parent a609b6f90b
commit 4322386c85
6 changed files with 42 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

7
modules/ppcp-button/resources/js/button.js
View file

@ -7,10 +7,12 @@ import ErrorHandler from './modules/ErrorHandler';
import CreditCardRenderer from "./modules/Renderer/CreditCardRenderer";
import dataClientIdAttributeHandler from "./modules/DataClientIdAttributeHandler";
import MessageRenderer from "./modules/Renderer/MessageRenderer";
import Spinner from "./modules/Helper/Spinner";
const bootstrap = () => {
const errorHandler = new ErrorHandler(PayPalCommerceGateway.labels.error.generic);
const creditCardRenderer = new CreditCardRenderer(PayPalCommerceGateway, errorHandler);
const spinner = new Spinner();
const creditCardRenderer = new CreditCardRenderer(PayPalCommerceGateway, errorHandler, spinner);
const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway);
const messageRenderer = new MessageRenderer(PayPalCommerceGateway.messages);
const context = PayPalCommerceGateway.context;
@ -46,7 +48,8 @@ const bootstrap = () => {
const checkoutBootstap = new CheckoutBootstap(
PayPalCommerceGateway,
renderer,
messageRenderer
messageRenderer,
spinner
);
checkoutBootstap.init();

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

@ -3,12 +3,14 @@ import {payerData} from "../Helper/PayerData";
class CheckoutActionHandler {
constructor(config, errorHandler) {
constructor(config, errorHandler, spinner) {
this.config = config;
this.errorHandler = errorHandler;
this.spinner = spinner;
}
configuration() {
const spinner = this.spinner;
const createOrder = (data, actions) => {
const payer = payerData();
const bnCode = typeof this.config.bn_codes[this.config.context] !== 'undefined' ?
@ -31,6 +33,7 @@ class CheckoutActionHandler {
return res.json();
}).then(function (data) {
if (!data.success) {
spinner.unblock();
errorHandler.message(data.data.message, true);
return;
}
@ -44,7 +47,7 @@ class CheckoutActionHandler {
}
return {
createOrder,
onApprove:onApprove(this, this.errorHandler),
onApprove:onApprove(this, this.errorHandler, this.spinner),
onError: (error) => {
this.errorHandler.genericError();
}

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

@ -2,10 +2,11 @@ import ErrorHandler from '../ErrorHandler';
import CheckoutActionHandler from '../ActionHandler/CheckoutActionHandler';
class CheckoutBootstap {
constructor(gateway, renderer, messages) {
constructor(gateway, renderer, messages, spinner) {
this.gateway = gateway;
this.renderer = renderer;
this.messages = messages
this.messages = messages;
this.spinner = spinner;
}
init() {
@ -41,6 +42,7 @@ class CheckoutBootstap {
const actionHandler = new CheckoutActionHandler(
PayPalCommerceGateway,
new ErrorHandler(this.gateway.labels.error.generic),
this.spinner
);
this.renderer.render(

20
modules/ppcp-button/resources/js/modules/Helper/Spinner.js Normal file
View file

@ -0,0 +1,20 @@
class Spinner {
block() {
jQuery( '.woocommerce-checkout-payment, .woocommerce-checkout-review-order-table' ).block({
message: null,
overlayCSS: {
background: '#fff',
opacity: 0.6
}
});
}
unblock() {
jQuery( '.woocommerce-checkout-payment, .woocommerce-checkout-review-order-table' ).unblock();
}
}
export default Spinner;

5
modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForPayNow.js
View file

@ -1,5 +1,6 @@
const onApprove = (context, errorHandler) => {
const onApprove = (context, errorHandler, spinner) => {
return (data, actions) => {
spinner.block();
return fetch(context.config.ajax.approve_order.endpoint, {
method: 'POST',
body: JSON.stringify({
@ -9,9 +10,9 @@ const onApprove = (context, errorHandler) => {
}).then((res)=>{
return res.json();
}).then((data)=>{
spinner.unblock();
if (!data.success) {
errorHandler.genericError();
console.error(data);
if (typeof actions.restart !== 'undefined') {
return actions.restart();
}

6
modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
View file

@ -2,9 +2,10 @@ import dccInputFactory from "../Helper/DccInputFactory";
class CreditCardRenderer {
constructor(defaultConfig, errorHandler) {
constructor(defaultConfig, errorHandler, spinner) {
this.defaultConfig = defaultConfig;
this.errorHandler = errorHandler;
this.spinner = spinner;
}
render(wrapper, contextConfig) {
@ -83,6 +84,7 @@ class CreditCardRenderer {
}
}).then(hostedFields => {
const submitEvent = (event) => {
this.spinner.block();
if (event) {
event.preventDefault();
}
@ -103,9 +105,11 @@ class CreditCardRenderer {
vault
}).then((payload) => {
payload.orderID = payload.orderId;
this.spinner.unblock();
return contextConfig.onApprove(payload);
});
} else {
this.spinner.unblock();
this.errorHandler.message(this.defaultConfig.hosted_fields.labels.fields_not_valid);
}
}