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

Merge pull request #45 from woocommerce/issue-39-missing-spinning-wheel

Browse source 
Activate spinner when credit card Place order button is clicked
This commit is contained in:
Rasmy Nguyen 2020-10-02 01:26:27 +00:00 • committed by GitHub
commit 60d2766836
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 45 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(

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

@ -0,0 +1,23 @@
class Spinner {
constructor() {
this.target = 'form.woocommerce-checkout';
}
block() {
jQuery( this.target ).block({
message: null,
overlayCSS: {
background: '#fff',
opacity: 0.6
}
});
}
unblock() {
jQuery( this.target ).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,13 +10,13 @@ const onApprove = (context, errorHandler) => {
}).then((res)=>{
return res.json();
}).then((data)=>{
spinner.unblock();
if (!data.success) {
if (data.data.code === 100) {
errorHandler.message(data.data.message);
} else {
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;
this.cardValid = false;
}
@ -88,6 +89,7 @@ class CreditCardRenderer {
}
}).then(hostedFields => {
const submitEvent = (event) => {
this.spinner.block();
if (event) {
event.preventDefault();
}
@ -108,9 +110,11 @@ class CreditCardRenderer {
vault
}).then((payload) => {
payload.orderID = payload.orderId;
this.spinner.unblock();
return contextConfig.onApprove(payload);
});
} else {
this.spinner.unblock();
const message = ! this.cardValid ? this.defaultConfig.hosted_fields.labels.card_not_supported : this.defaultConfig.hosted_fields.labels.fields_not_valid;
this.errorHandler.message(message);
}