diff --git a/packages/e2e/app/src/pages/GiftCardsSessions/GiftCardsSessions.js b/packages/e2e/app/src/pages/GiftCardsSessions/GiftCardsSessions.js index 1e992912be..98e8c7ac39 100644 --- a/packages/e2e/app/src/pages/GiftCardsSessions/GiftCardsSessions.js +++ b/packages/e2e/app/src/pages/GiftCardsSessions/GiftCardsSessions.js @@ -39,6 +39,9 @@ const initCheckout = async () => { brand: 'valuelink', onOrderCreated: (data) => { window.onOrderCreatedTestData = data; + }, + onRequiringConfirmation: () => { + window.onRequiringConfirmationTestData = true; } }) .mount('.card-field'); diff --git a/packages/e2e/tests/giftcards/onOrderCreated/onOrderCreated.mocks.js b/packages/e2e/tests/giftcards/onOrderCreated/onOrderCreated.mocks.js index 26e013159b..a0d97df8f6 100644 --- a/packages/e2e/tests/giftcards/onOrderCreated/onOrderCreated.mocks.js +++ b/packages/e2e/tests/giftcards/onOrderCreated/onOrderCreated.mocks.js @@ -94,7 +94,8 @@ const noCallbackPaymentResponse = { const loggers = { setupLogger: RequestLogger({ url: setupUrl, method: 'post' }, { logRequestBody: true }), balanceLogger: RequestLogger({ url: balanceUrl, method: 'post' }, { logRequestBody: true }), - ordersLogger: RequestLogger({ url: ordersUrl, method: 'post' }, { logRequestBody: true }) + ordersLogger: RequestLogger({ url: ordersUrl, method: 'post' }, { logRequestBody: true }), + paymentLogger: RequestLogger({ url: paymentsUrl, method: 'post' }, { logRequestBody: true }) }; const mock = RequestMock() diff --git a/packages/e2e/tests/giftcards/onRequiringConfirmation/onRequiringConfirmation.clientScripts.js b/packages/e2e/tests/giftcards/onRequiringConfirmation/onRequiringConfirmation.clientScripts.js new file mode 100644 index 0000000000..7420c98839 --- /dev/null +++ b/packages/e2e/tests/giftcards/onRequiringConfirmation/onRequiringConfirmation.clientScripts.js @@ -0,0 +1,13 @@ +window.mainConfiguration = { + allowPaymentMethods: ['giftcard'], + paymentMethodsConfiguration: { + giftcard: { + brandsConfiguration: { + genericgiftcard: { + icon: 'https://checkoutshopper-test.adyen.com/checkoutshopper/images/logos/mc.svg', + name: 'Gifty mcGiftface' + } + } + } + } +}; diff --git a/packages/e2e/tests/giftcards/onRequiringConfirmation/onRequiringConfirmation.mocks.js b/packages/e2e/tests/giftcards/onRequiringConfirmation/onRequiringConfirmation.mocks.js new file mode 100644 index 0000000000..2cdf353281 --- /dev/null +++ b/packages/e2e/tests/giftcards/onRequiringConfirmation/onRequiringConfirmation.mocks.js @@ -0,0 +1,28 @@ +import { RequestMock, RequestLogger } from 'testcafe'; +import { BASE_URL } from '../../pages'; + +import { mock, loggers } from '../onOrderCreated/onOrderCreated.mocks'; + +const path = require('path'); +require('dotenv').config({ path: path.resolve('../../', '.env') }); + +const MOCK_SESSION_ID = 'CS616D08FC28573F9C'; +const MOCK_SESSION_DATA = 'Ab02b4c0!BQABAgChW9EQ6U'; + +const balanceUrl = `https://checkoutshopper-test.adyen.com/checkoutshopper/v1/sessions/${MOCK_SESSION_ID}/paymentMethodBalance?clientKey=${process.env.CLIENT_KEY}`; + +const balanceResponse = { + balance: { + currency: 'USD', + value: 1000000 + }, + sessionData: MOCK_SESSION_DATA +}; + +const balanceMock = RequestMock() + .onRequestTo(request => request.url === balanceUrl && request.method === 'post') + .respond(balanceResponse, 200, { + 'Access-Control-Allow-Origin': BASE_URL + }); + +export { mock, balanceMock, loggers, MOCK_SESSION_DATA }; diff --git a/packages/e2e/tests/giftcards/onRequiringConfirmation/onRequiringConfirmation.test.js b/packages/e2e/tests/giftcards/onRequiringConfirmation/onRequiringConfirmation.test.js new file mode 100644 index 0000000000..1b249159f5 --- /dev/null +++ b/packages/e2e/tests/giftcards/onRequiringConfirmation/onRequiringConfirmation.test.js @@ -0,0 +1,47 @@ +import { ClientFunction } from 'testcafe'; + +import { fillIFrame, getInputSelector } from '../../utils/commonUtils'; +import { GIFTCARD_NUMBER, GIFTCARD_PIN } from '../utils/constants'; +import { GIFTCARDS_SESSIONS_URL } from '../../pages'; +import {mock, loggers, MOCK_SESSION_DATA, balanceMock} from './onRequiringConfirmation.mocks'; + +import { GiftCardSessionPage } from '../../_models/GiftCardComponent.page'; + +const giftCard = new GiftCardSessionPage(); +const { balanceLogger, ordersLogger, paymentLogger } = loggers; + +const getCallBackData = ClientFunction(() => window.onRequiringConfirmationTestData); + +// only setup the loggers for the endpoints so we can setup different responses for different scenarios +fixture`Testing gift cards`.page(GIFTCARDS_SESSIONS_URL).requestHooks([balanceLogger, ordersLogger, paymentLogger]); + +// set up request hooks for different scenarios +test.requestHooks([balanceMock, mock])('Test if onRequiringConfirmation is retrieved on success', async t => { + + await giftCard.pmHolder(); + await giftCard.cardUtils.fillCardNumber(t, GIFTCARD_NUMBER); + await fillIFrame(t, giftCard.iframeSelector, 1, getInputSelector('encryptedSecurityCode'), GIFTCARD_PIN); + + // first step, request confirmation (.balanceCheck()) + await t + .click(giftCard.payButton) + .expect(balanceLogger.count(() => true)) + .eql(1) + .expect( + balanceLogger.contains(record => { + const { sessionData } = JSON.parse(record.request.body); + return sessionData === MOCK_SESSION_DATA; + }) + ) + .ok() + .expect(ordersLogger.count(() => true)) + .eql(0) + .expect(getCallBackData()) + .ok(); + + // second step, make payment (.submit()) + await t + .click(giftCard.payButton) + .expect(paymentLogger.count(() => true)) + .eql(1) +}); \ No newline at end of file diff --git a/packages/lib/src/components/Giftcard/Giftcard.tsx b/packages/lib/src/components/Giftcard/Giftcard.tsx index 4af717fd3b..7356111941 100644 --- a/packages/lib/src/components/Giftcard/Giftcard.tsx +++ b/packages/lib/src/components/Giftcard/Giftcard.tsx @@ -81,6 +81,11 @@ export class GiftcardElement extends UIElement { } }; + public balanceCheck() { + return this.onBalanceCheck(); + } + + public onBalanceCheck = () => { // skip balance check if no onBalanceCheck event has been defined const hasBalanceCheck = this.props.session || this.props.onBalanceCheck; @@ -111,6 +116,11 @@ export class GiftcardElement extends UIElement { this.submit(); }); } + else { + if (this.props.onRequiringConfirmation) { + this.props.onRequiringConfirmation(); + } + } }) .catch(error => { this.setStatus(error?.message || 'error'); diff --git a/packages/playground/src/pages/GiftCards/GiftCards.html b/packages/playground/src/pages/GiftCards/GiftCards.html index b1419794ff..e405bd16e8 100644 --- a/packages/playground/src/pages/GiftCards/GiftCards.html +++ b/packages/playground/src/pages/GiftCards/GiftCards.html @@ -1,131 +1,136 @@ - - - - Adyen Web | Gift Cards - - - + + + + Adyen Web | Gift Cards + + + - -
-
-
-
-
-

Giftcard

-
-
-
-
-
+ +
+
+
+
+
+

Giftcard

+
+
+
+
+
-
-
-
-

Mealvoucher

-
-
-
-
-
+
+
+
+

Mealvoucher

+
+
+
+
+
-
-
-
-

Gift Card Component (w/ Sessions)

-
-
-
-
-
-
-
-
+
+
+
+

Gift Card Component (w/ Sessions)

+
+
+
+
+
+
+
+ +
+
+
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Test gift cards -
Card TypeCard NumberPIN
Gall & Gall Card6064365010000000000073737
Baby Gift Card6064362200000000000073737
Gift Card6280501100000000000073737
Kado Wereld6064362510000000000073737
Entertainment Card6064361100000000000073737
Plastix401010000000000000073737
Webshop Giftcard6064362070000000000073737
Leasure Giftcard6064362280000000000073737
VVV Giftcard6064364240000000000737373
GiftForYou (Bloemen)60643647103300000000737373
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Test gift cards +
Card TypeCard NumberPIN
Gall & Gall Card6064365010000000000073737
Baby Gift Card6064362200000000000073737
Gift Card6280501100000000000073737
Kado Wereld6064362510000000000073737
Entertainment Card6064361100000000000073737
Plastix401010000000000000073737
Webshop Giftcard6064362070000000000073737
Leasure Giftcard6064362280000000000073737
VVV Giftcard6064364240000000000737373
GiftForYou (Bloemen)60643647103300000000737373
-

- - More information → - -

-
-
- - +

+ + More information → + +

+
+
+ + diff --git a/packages/playground/src/pages/GiftCards/GiftCards.js b/packages/playground/src/pages/GiftCards/GiftCards.js index 442c51997d..08d6831d6f 100644 --- a/packages/playground/src/pages/GiftCards/GiftCards.js +++ b/packages/playground/src/pages/GiftCards/GiftCards.js @@ -58,7 +58,7 @@ import '../../style.scss'; environment: process.env.__CLIENT_ENV__, clientKey: process.env.__CLIENT_KEY__, session, - showPayButton: true, + showPayButton: false, // Events beforeSubmit: (data, component, actions) => { @@ -72,18 +72,41 @@ import '../../style.scss'; } }); + const checkoutButton = document.querySelector('#custom-checkout-button'); + + const giftcardCheckBalance = () => window.giftcard.balanceCheck(); + const giftcardSubmit = () => window.giftcard.submit(); + const cardSubmit = () => window.card.submit(); + + checkoutButton.addEventListener('click', giftcardCheckBalance); + + const setupGiftCardSubmit = () => { + checkoutButton.removeEventListener('click', giftcardCheckBalance); + checkoutButton.addEventListener('click', giftcardSubmit); + }; + const setupCardSubmit = () => { + checkoutButton.removeEventListener('click', setupGiftCardSubmit); + checkoutButton.addEventListener('click', cardSubmit); + }; + window.giftcard = sessionCheckout .create('giftcard', { type: 'giftcard', brand: 'svs', - onOrderCreated: (data) => { - afterGiftCard(data); + onSubmit: () => { + afterGiftCard(); + }, + onOrderCreated: () => { + afterGiftCard(); + }, + onRequiringConfirmation: () => { + setupGiftCardSubmit(); } }) .mount('#giftcard-session-container'); - - const afterGiftCard = (order) => { - sessionCheckout.create('card').mount('#payment-method-container'); - } + const afterGiftCard = () => { + window.card = sessionCheckout.create('card').mount('#payment-method-container'); + setupCardSubmit(); + }; })();