Skip to content

Commit

Permalink
Fix express checkout flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbool @Matt75
bbool authored and Matt75 committed Dec 14, 2022
1 parent af1bd21 commit 8044523
Show file tree
Hide file tree
Showing 15 changed files with 273 additions and 275 deletions.
8 changes: 5 additions & 3 deletions _dev/js/front/src/components/1_6/express-button-cart.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,11 @@ export class ExpressButtonCartComponent extends BaseComponent {
if (!this.buttonReferenceContainer) return;

this.renderComponent();
this.prestashopService.onUpdatedShoppingCartExtra(() =>
this.renderComponent()
);
this.prestashopService.onUpdatedShoppingCartExtra(() => {
if (null === document.querySelector('#ps_checkout-express-button-cart')) {
this.renderComponent();
}
});

return this;
}
Expand Down
8 changes: 5 additions & 3 deletions _dev/js/front/src/components/1_6/pay-later-button-cart.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,11 @@ export class PayLaterButtonCartComponent extends BaseComponent {
if (!this.buttonReferenceContainer) return;

this.renderComponent();
this.prestashopService.onUpdatedShoppingCartExtra(() =>
this.renderComponent()
);
this.prestashopService.onUpdatedShoppingCartExtra(() => {
if (null === document.querySelector('#ps_checkout-express-button-cart')) {
this.renderComponent();
}
});

return this;
}
Expand Down
116 changes: 30 additions & 86 deletions _dev/js/front/src/components/1_6/payment-options.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,6 @@ export class PaymentOptionsComponent extends BaseComponent {

created() {
this.data.HTMLElement = this.querySelectorService.getPaymentOptions();

this.data.HTMLExpressCheckoutPaymentConfirmation = this.querySelectorService.getBasePaymentConfirmation();

this.data.HTMLElementHookPayment = document.querySelector('#HOOK_PAYMENT');
}

renderPaymentOptionItems() {
Expand All @@ -48,7 +44,6 @@ export class PaymentOptionsComponent extends BaseComponent {
new PaymentOptionComponent(this.app, {
fundingSource: fundingSource,
markPosition: this.props.markPosition,

HTMLElement
}).render()
);
Expand All @@ -57,8 +52,7 @@ export class PaymentOptionsComponent extends BaseComponent {
}

renderPaymentOptionListener() {
const HTMLListenerElements = this.children.paymentOptions.map(
(paymentOption) => {
const HTMLListenerElements = this.children.paymentOptions.map((paymentOption) => {
const HTMLElement = paymentOption.data.HTMLElementContainer;
const [button, form] = Array.prototype.slice.call(
HTMLElement.querySelectorAll('.payment_module')
Expand All @@ -80,100 +74,50 @@ export class PaymentOptionsComponent extends BaseComponent {
this.data.notification.hideError();
});

if (this.config.expressCheckout.active && (('ps_checkout-' + this.payPalService.getFundingSource()) !== HTMLListenerElements[index].button.dataset.moduleName)) {
this.psCheckoutApi.postCancelOrder(
{
orderID: this.payPalService.getOrderId(),
fundingSource: this.payPalService.getFundingSource(),
isExpressCheckout: true
}
).then(() => {
this.config.expressCheckout.active = false;

const expressCheckoutContainer = document.querySelector('#ps_checkout-express-checkout-banner');
if (expressCheckoutContainer) {
expressCheckoutContainer.style.display = 'none';
}
});
}

HTMLListenerElements[index].button.classList.add('open');
HTMLListenerElements[index].button.classList.remove('closed');
HTMLListenerElements[index].form.classList.add('open');
HTMLListenerElements[index].form.classList.remove('closed');
});
});
}

getHookPaymentElements() {
return Array.prototype.slice.call(
document.querySelector('#HOOK_PAYMENT').children
);
}

renderExpressCheckoutPaymentButton() {
const paymentButton = this.data.HTMLExpressCheckoutPaymentConfirmation;

paymentButton.addEventListener('click', (event) => {
event.preventDefault();
this.data.loader.show();

this.psCheckoutApi
.postCheckCartOrder(
{
orderID: this.payPalService.getOrderId(),
fundingSource: this.payPalService.getFundingSource(),
isExpressCheckout: true
},
{ resolve: () => {}, reject: () => {} }
)
.then(() =>
this.psCheckoutApi.postValidateOrder({
orderID: this.payPalService.getOrderId(),
fundingSource: this.payPalService.getFundingSource(),
isExpressCheckout: true
})
)
.catch((error) => {
console.log(error);
this.data.loader.hide();
this.data.notification.showError(error.message);
});
});

paymentButton.disabled = !this.data.conditions.isChecked();
this.data.conditions.onChange(() => {
paymentButton.disabled = !this.data.conditions.isChecked();
});

this.getHookPaymentElements().forEach((element) => {
if (element.id !== 'ps_checkout-displayPayment' && element.id !== 'ps_checkout-notification-container') {
element.style.display = 'none';
}
});
}

renderExpressCheckoutCancelButton() {
const cancelButton = document.querySelector('#ps_checkout-cancel');

if (!cancelButton) {
console.error('HTMLElement selector #ps_checkout-cancel not found.');
return;
console.log(this.payPalService.getFundingSource());
if (this.config.expressCheckout.active) {
HTMLListenerElements.forEach(({ button, form }) => {
if (button.dataset.moduleName === ('ps_checkout-' + this.payPalService.getFundingSource())) {
button.classList.add('open');
button.classList.remove('closed');
form.classList.add('open');
form.classList.remove('closed');
}
});
}

cancelButton.addEventListener('click', () => {
this.psCheckoutApi.postCancelOrder(
{
orderID: this.payPalService.getOrderId(),
fundingSource: this.payPalService.getFundingSource(),
isExpressCheckout: true
})
.then(() => {
location.reload();
})
.catch((error) => {
console.error(error);
this.data.notification.showError(error.message);
});
});
}

render() {
this.data.conditions = this.app.root.children.conditionsCheckbox;
this.data.notification = this.app.root.children.notification;
this.data.loader = this.app.root.children.loader;

if (!this.config.expressCheckout.active) {
this.renderPaymentOptionItems();
this.renderPaymentOptionListener();
} else {
this.data.HTMLElement.style.display = 'none';
this.renderExpressCheckoutPaymentButton();
this.renderExpressCheckoutCancelButton();
}
this.renderPaymentOptionItems();
this.renderPaymentOptionListener();

return this;
}
Expand Down
134 changes: 24 additions & 110 deletions _dev/js/front/src/components/1_7/payment-options.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,127 +40,46 @@ export class PaymentOptionsComponent extends BaseComponent {
`[data-module-name^="ps_checkout-${fundingSource.name}"]`
);

if (this.payPalService.getFundingSource() === fundingSource.name) {
HTMLElement.click();
}

return (
HTMLElement &&
new PaymentOptionComponent(this.app, {
fundingSource: fundingSource,
markPosition: this.props.markPosition,

HTMLElement
}).render()
);
})
.filter((paymentOption) => paymentOption);
}

renderPaymentOptionRadios() {
renderPaymentOptionListener() {
const radios = this.querySelectorService.getPaymentOptionRadios();
radios.forEach((radio) => {
radio.addEventListener('change', () => {
this.data.notification.hideCancelled();
this.data.notification.hideError();
});
});
}

renderExpressCheckoutPaymentButton() {
this.data.HTMLElementPaymentOptionsContainer.style.display = 'none';
const nativePaymentButton = this.data.HTMLBasePaymentConfirmation;
const paymentButton = nativePaymentButton.cloneNode(true);
const nativePaymentButtonContainer = nativePaymentButton.parentElement;

nativePaymentButton.style.display = 'none';

paymentButton.id = 'ps_checkout-express-checkout-button';
paymentButton.type = 'button';

paymentButton.addEventListener('click', (event) => {
event.preventDefault();
this.data.loader.show();

this.psCheckoutApi
.postCheckCartOrder(
{
orderID: this.payPalService.getOrderId(),
fundingSource: this.payPalService.getFundingSource(),
isExpressCheckout: true
},
{ resolve: () => {}, reject: () => {} }
)
.then(() =>
this.psCheckoutApi.postValidateOrder({
orderID: this.payPalService.getOrderId(),
fundingSource: this.payPalService.getFundingSource(),
isExpressCheckout: true
})
)
.catch((error) => {
console.log(error);
this.data.loader.hide();
this.data.notification.showError(error.message);
});
});

this.children.expressCheckoutButton = document.createElement('div');

this.children.expressCheckoutButton.id = 'button-paypal';
this.children.expressCheckoutButton.classList.add(
'ps_checkout-express-checkout-button'
);

paymentButton.disabled = !this.data.conditions.isChecked();
paymentButton.classList.toggle('disabled', paymentButton.disabled);

this.data.conditions.onChange(() => {
setTimeout(() => {
nativePaymentButton.style.display = 'none';
paymentButton.disabled = !this.data.conditions.isChecked();
paymentButton.classList.toggle('disabled', paymentButton.disabled);
}, 0);
});

this.children.expressCheckoutButton.append(paymentButton);
nativePaymentButtonContainer.append(
this.children.expressCheckoutButton
);
}

renderExpressCheckoutCancelButton() {
const cancelButton = document.querySelector('#ps_checkout-cancel');

if (!cancelButton) {
console.error('HTMLElement selector #ps_checkout-cancel not found.');
return;
}

cancelButton.addEventListener('click', () => {
this.psCheckoutApi.postCancelOrder(
{
orderID: this.payPalService.getOrderId(),
fundingSource: this.payPalService.getFundingSource(),
isExpressCheckout: true
})
.then(() => {
this.renderPaymentOptionItems();
this.renderPaymentOptionRadios();
const expressCheckoutContainer = document.querySelector('.express-checkout-block');
const expressCheckoutPaymentButton = document.querySelector('#ps_checkout-express-checkout-button');

if (expressCheckoutContainer) {
expressCheckoutContainer.style.display = 'none';
}

if (expressCheckoutPaymentButton) {
expressCheckoutPaymentButton.style.display = 'none';
}

this.data.HTMLElementPaymentOptionsContainer.style.display = 'block';
this.data.HTMLBasePaymentConfirmation.style.display = 'block';
})
.catch((error) => {
console.error(error);
this.data.notification.showError(error.message);
});
if (this.config.expressCheckout.active && (('ps_checkout-' + this.payPalService.getFundingSource()) !== radio.dataset.moduleName)) {
this.psCheckoutApi.postCancelOrder(
{
orderID: this.payPalService.getOrderId(),
fundingSource: this.payPalService.getFundingSource(),
isExpressCheckout: true
}
).then(() => {
this.config.expressCheckout.active = false;

const expressCheckoutContainer = document.querySelector('#ps_checkout-express-checkout-banner');
if (expressCheckoutContainer) {
expressCheckoutContainer.style.display = 'none';
}
});
}
});
});
}

Expand All @@ -169,13 +88,8 @@ export class PaymentOptionsComponent extends BaseComponent {
this.data.notification = this.app.root.children.notification;
this.data.loader = this.app.root.children.loader;

if (!this.config.expressCheckout.active) {
this.renderPaymentOptionItems();
this.renderPaymentOptionRadios();
} else {
this.renderExpressCheckoutPaymentButton();
this.renderExpressCheckoutCancelButton();
}
this.renderPaymentOptionItems();
this.renderPaymentOptionListener();

return this;
}
Expand Down
7 changes: 6 additions & 1 deletion _dev/js/front/src/components/common/express-checkout-button.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,12 @@ export class ExpressCheckoutButtonComponent extends BaseComponent {
return (
this.psCheckoutApi
.postCheckCartOrder(
{ ...data, fundingSource: this.props.fundingSource, isExpressCheckout: true },
{
...data,
fundingSource: this.props.fundingSource,
isExpressCheckout: true,
orderID: this.payPalService.getOrderId(),
},
actions
)
// TODO: Error notification
Expand Down
Loading

0 comments on commit 8044523

Please sign in to comment.