diff --git a/package.json b/package.json index 8bb684a..26d2791 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "*.{js,jsx,ts,tsx}": "eslint --fix --max-warnings 0" }, "dependencies": { - "@boldcommerce/checkout-frontend-library": "0.53.0", + "@boldcommerce/checkout-frontend-library": "0.53.1", "@paypal/paypal-js": "^7.0.1", "@types/applepayjs": "^3.0.4", "@types/googlepay": "^0.6.4" diff --git a/src/paypal/ppcp_apple/createPPCPApple.ts b/src/paypal/ppcp_apple/createPPCPApple.ts index 030eab0..722d1fa 100644 --- a/src/paypal/ppcp_apple/createPPCPApple.ts +++ b/src/paypal/ppcp_apple/createPPCPApple.ts @@ -9,11 +9,13 @@ export function createPPCPApple(): void { const ppcpAppleDiv = document.createElement('div'); ppcpAppleDiv.id = 'ppcp-apple-express-payment'; ppcpAppleDiv.className = 'ppcp-apple-express-payment'; + ppcpAppleDiv.dataset.testid = 'ppcp-apple-express-payment'; const button = document.createElement('button'); button.className = 'ppcp-apple-pay-button'; button.id = 'ppcp-apple-pay-button'; button.type = 'button'; + button.dataset.testid = 'ppcp-apple-pay-button'; button.addEventListener('click', ppcpOnClickApple); ppcpAppleDiv.appendChild(button); @@ -25,4 +27,4 @@ export function createPPCPApple(): void { container.appendChild(ppcpAppleDiv); } enableDisableSection( showPaymentMethodTypes.PPCP_APPLE, true); -} \ No newline at end of file +} diff --git a/src/paypal/ppcp_buttons/ppcpOnLoad.ts b/src/paypal/ppcp_buttons/ppcpOnLoad.ts index 6b7ed6a..95f4e92 100644 --- a/src/paypal/ppcp_buttons/ppcpOnLoad.ts +++ b/src/paypal/ppcp_buttons/ppcpOnLoad.ts @@ -15,11 +15,23 @@ export async function ppcpOnLoad(payment: IExpressPayPaypalCommercePlatformButto let enableSection = false; + const paypalButtonDiv = document.createElement('div'); + const paypalButtonDivId = 'ppcp-paypal-express-payment-button'; + paypalButtonDiv.id = paypalButtonDivId; + paypalButtonDiv.dataset.testid = paypalButtonDivId; + + const payLaterButtonDiv = document.createElement('div'); + const payLaterButtonDivId = 'ppcp-paylater-express-payment-button'; + payLaterButtonDiv.id = payLaterButtonDivId; + payLaterButtonDiv.dataset.testid = payLaterButtonDivId; + // creating a paypal payment div inside express payment container const paypalDiv = document.createElement('div'); const paypalDivId = 'ppcp-express-payment'; paypalDiv.id = paypalDivId; paypalDiv.className = `${paypalDivId}`; + paypalDiv.appendChild(paypalButtonDiv); + paypalDiv.appendChild(payLaterButtonDiv); const container = document.getElementById('express-payment-container'); container?.appendChild(paypalDiv); @@ -48,12 +60,12 @@ export async function ppcpOnLoad(payment: IExpressPayPaypalCommercePlatformButto if(container) { if (paypalButton.isEligible()) { - await paypalButton.render(`#${paypalDivId}`); + await paypalButton.render(`#${paypalButtonDivId}`); enableSection = true; } if (payLaterButton.isEligible()) { - await payLaterButton.render(`#${paypalDivId}`); + await payLaterButton.render(`#${payLaterButtonDivId}`); enableSection = true; } diff --git a/tests/paypal/ppcp_buttons/ppcpOnLoad.test.ts b/tests/paypal/ppcp_buttons/ppcpOnLoad.test.ts index 999dc5f..93466ac 100644 --- a/tests/paypal/ppcp_buttons/ppcpOnLoad.test.ts +++ b/tests/paypal/ppcp_buttons/ppcpOnLoad.test.ts @@ -91,7 +91,8 @@ describe('testing ppcpOnload function', () => { expect(document.getElementById('ppcp-express-payment')?.style.display).toBe(''); expect(paypalButtonIsEligibleMock).toHaveBeenCalledTimes(2); expect(paypalButtonRenderMock).toHaveBeenCalledTimes(2); - expect(paypalButtonRenderMock).toHaveBeenCalledWith('#ppcp-express-payment'); + expect(paypalButtonRenderMock).toHaveBeenCalledWith('#ppcp-paypal-express-payment-button'); + expect(paypalButtonRenderMock).toHaveBeenCalledWith('#ppcp-paylater-express-payment-button'); expect(enableDisableSectionMock).toHaveBeenCalledTimes(1); expect(enableDisableSectionMock).toHaveBeenCalledWith(showPaymentMethodTypes.PPCP, true); }); diff --git a/yarn.lock b/yarn.lock index f7f6125..061c4eb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -302,10 +302,10 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@boldcommerce/checkout-frontend-library@0.53.0": - version "0.53.0" - resolved "https://registry.yarnpkg.com/@boldcommerce/checkout-frontend-library/-/checkout-frontend-library-0.53.0.tgz#b72c7b32c4bb95eb3c07010b5f0957c26082c929" - integrity sha512-bikr6wTgJOnvumNWrBd9JuvLRrpcj9ZqjSJZMsRmvqVp07posPOVA0GElywFLWo1CP+FrwsrkrM8nmPH3aMLZw== +"@boldcommerce/checkout-frontend-library@0.53.1": + version "0.53.1" + resolved "https://registry.yarnpkg.com/@boldcommerce/checkout-frontend-library/-/checkout-frontend-library-0.53.1.tgz#44d03ff801d050a70331d88e4a304c66093bf0f9" + integrity sha512-PW7klLttjqz9b+sDpr0U2jz/5uuyK87G30b8HsFbjVRgkQZD736OcCoG9DqTZtr9Yq8Bphp1vgYDCFPnO3dIDQ== "@eslint/eslintrc@^0.4.3": version "0.4.3"