Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Checkout block UI #117

Merged
merged 10 commits into from
Jun 12, 2024
Merged

Update Checkout block UI #117

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a9225ff
Fix UI issues
Dinwy May 23, 2024
1f14a57
Set width auto for label
Dinwy May 24, 2024
82928b6
Hide invisible fields
Dinwy May 27, 2024
c3ef110
Keep the version to 3.1.2
Dinwy May 27, 2024
b0deadd
Show all komoju fields
Dinwy May 27, 2024
d227152
Change komoju field instanting timing
Dinwy May 27, 2024
9db4630
Hide blocks if it is not on the whitlists
Dinwy May 29, 2024
a96967f
Fix merge conflicts with master
Dinwy Jun 11, 2024
9691145
Explicitly select credit card test
Dinwy Jun 11, 2024
4c4ebc6
Fix for empty description and token catching event
Dinwy Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 36 additions & 23 deletions includes/js/komoju-checkout-blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,41 @@ const KomojuPaymentModule = (() => {
const { useEffect, useCallback, useRef, createElement } = window.wp.element;

function registerPaymentMethod(paymentMethod) {
let name = `${paymentMethod.id}`
const name = `${paymentMethod.id}`
const settings = window.wc.wcSettings.getSetting(`${name}_data`, {});

const komojuFields =
settings.inlineFields
? createElement('komoju-fields', {
'token': '',
'name': 'komoju_payment_token',
'komoju-api': settings.komojuApi,
'publishable-key': settings.publishableKey,
'session': settings.session,
'payment-type': settings.paymentType,
'locale': settings.locale,
style: { display: 'none' },
})
: null;
const description = window.wp.htmlEntities.decodeEntities(settings.description || window.wp.i18n.__('title', 'komoju_woocommerce'));
const descriptionDiv = createElement('div',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we set descriptionDiv to null if description is falsy (i.e., zero-length string), maybe?

AIUI description can be empty, notably due to the default configurations for plugin versions <= 3.0.9. In such cases descriptoinDiv will be an empty <div>, which just adds a void blank line under the payment name - I fear that doesn't look good.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I set descriptionDiv to null when it is empty.
I also changed the server-side behaviour how it sets the description. Previously, it was setting default description when the description is empty. Now user are able to empty description.

Since description div & komojuField can be null, null checks have been added in the code too.

{
id: `${name}_description`,
style: { display: 'none', alignItems: 'center', justifyContent: 'center', width: '100%' }
},
description
);

const label = createElement('div', {
style: { display: 'block', alignItems: 'center', justifyContent: 'center', width: '100%' }
style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '95%', flexWrap: 'wrap' }
},
window.wp.htmlEntities.decodeEntities(settings.title || window.wp.i18n.__('NULL GATEWAY', 'test_komoju_gateway')),
createElement('span', { style: { width: 'auto' } }, window.wp.htmlEntities.decodeEntities(settings.title || window.wp.i18n.__('title', 'komoju_woocommerce'))),
settings.icon ?
createElement('img', {
src: settings.icon,
alt: settings.title || 'Payment Method Icon',
style: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginLeft: '10px' }
}) : null,
komojuFields
descriptionDiv
);

const KomojuComponent = ({ activePaymentMethod, emitResponse, eventRegistration }) => {
const { onPaymentSetup } = eventRegistration;
const komojuFieldEnabledMethods = ['komoju_credit_card', 'komoju_konbini', 'komoju_bank_transfer']

useEffect(() => {
if (paymentMethod.id != activePaymentMethod) return;

const komojuField = document.querySelector(`komoju-fields[payment-type='${paymentMethod.paymentType}']`);
komojuField.style.display = 'block';
if (komojuFieldEnabledMethods.includes(paymentMethod.id)) komojuField.style.display = 'block';
const descriptionElement = document.getElementById(`${name}_description`);
descriptionElement.style.display = 'block';

const unsubscribe = onPaymentSetup(async () => {
if (paymentMethod.id != activePaymentMethod) return;
Expand All @@ -51,7 +49,7 @@ const KomojuPaymentModule = (() => {
};
}

function submitFields(fields) {
async function submitFields(fields) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great catch!

I just thought we need to carefully test both successful payments and failing payments, because making this function really async could change the timing this function returns, and thus could result in another timing issues. It's not blocking this PR but I expect you would double-check the behaviour manually. 🙏

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the check!

I've updated the submitFields function based on the feedback. I removed the unnecessary async keyword from the Promise constructor to clarify the function's control flow and error handling, which should help avoid any potential timing issues.

return new Promise(async (resolve, reject) => {
fields.addEventListener("komoju-invalid", reject);
const token = await fields.submit();
Expand Down Expand Up @@ -80,13 +78,30 @@ const KomojuPaymentModule = (() => {

return () => {
komojuField.style.display = 'none';
descriptionElement.style.display = 'none';
unsubscribe();
};
}, [
activePaymentMethod,
emitResponse.responseTypes.ERROR,
emitResponse.responseTypes.SUCCESS
]);

const komojuFields =
settings.inlineFields
? createElement('komoju-fields', {
'token': '',
'name': 'komoju_payment_token',
'komoju-api': settings.komojuApi,
'publishable-key': settings.publishableKey,
'session': settings.session,
'payment-type': settings.paymentType,
'locale': settings.locale,
style: { display: 'none' },
})
: null;

return komojuFields;
};

const Block_Gateway = {
Expand All @@ -106,9 +121,7 @@ const KomojuPaymentModule = (() => {
return {
init: () => {
const paymentMethodData = window.wc.wcSettings.getSetting('paymentMethodData', {});
Object.values(paymentMethodData).forEach((value) => {
registerPaymentMethod(value);
});
Object.values(paymentMethodData).forEach(registerPaymentMethod);
}
};
})();
Expand Down
3 changes: 2 additions & 1 deletion tests/cypress/e2e/checkout.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ describe('KOMOJU for WooCommerce: Checkout', () => {
cy.addItemAndProceedToCheckout();
cy.fillInAddress();

cy.get('label[for="radio-control-wc-payment-method-options-komoju_credit_card"]').click();
cy.get('komoju-fields[payment-type="credit_card"]').should('be.visible');
cy.get('komoju-fields[payment-type="credit_card"] iframe').iframe().find('komoju-host').should('exist');
cy.wait(2000);
Expand All @@ -71,7 +72,7 @@ describe('KOMOJU for WooCommerce: Checkout', () => {
cy.fillInAddress();

cy.get('label[for="radio-control-wc-payment-method-options-komoju_web_money"]').click();
cy.get('komoju-fields[payment-type="web_money"]').should('be.visible');
// cy.get('komoju-fields[payment-type="web_money"]').should('be.visible');
cy.get('komoju-fields[payment-type="web_money"] iframe').iframe().find('komoju-host').should('exist');

cy.contains('Place Order').click();
Expand Down
Loading