Update payment steps to use Adyen

playwright-tests/pages/AfterpayPage.ts

@@ -1,6 +1,6 @@
 import { Locator, Page } from "@playwright/test";
 import { BasePage } from "./BasePage";
-import { IClaimDetails, IPaymentDetails } from "@business-logic/types/CustomerDetails";
+import { IClaimDetails, IPaymentDetails, IPaymentDetailsAdyen } from "@business-logic/types/CustomerDetails";
 import { ServicePackage } from "@business-logic/types/Enums";
 
 export class AfterpayPage extends BasePage {
@@ -33,11 +33,11 @@ export class AfterpayPage extends BasePage {
         await this.submitButton.click();
     }
 
-    async executeAfterpayPayment(paymentDetails: IPaymentDetails, claimDetails: IClaimDetails, servicePackage: ServicePackage) {
+    async executeAfterpayPayment(paymentDetailsAdyen: IPaymentDetailsAdyen, claimDetails: IClaimDetails, servicePackage: ServicePackage) {
 
         const confirmButtonOrPaymentOptions = this.confirmButton.or(this.selectAfterpayWithoutInterestButton);
         
-        await this.login(paymentDetails.password!);
+        await this.login(paymentDetailsAdyen.password!);
 
         await this.page.locator('div[data-testid=\'loading-icon-svg\']').filter({ visible: true}).first().waitFor({ state: 'hidden' });
         await confirmButtonOrPaymentOptions.waitFor({ state: 'visible' });

playwright-tests/pages/PaymentMethodPage.ts

@@ -1,18 +1,24 @@
 import { expect, type Locator, type Page } from '@playwright/test';
 import { BasePage } from './BasePage';
-import { IClaimDetails, IPaymentDetails } from '@business-logic/types/CustomerDetails';
+import { IClaimDetails, IPaymentDetails, IPaymentDetailsAdyen } from '@business-logic/types/CustomerDetails';
 import { PaymentType, ServicePackage } from '@business-logic/types/Enums';
 import { PaymentPage } from './PaymentPage';
 import { AfterpayPage } from './AfterpayPage';
 import { PaypalPage } from './PaypalPage';
+import { PaymentAdyenPage } from './PaymentAdyenPage';
 
 export class PaymentMethodPage extends BasePage {
     readonly page: Page;
     readonly paypalPage: PaypalPage;
     readonly paymentPage: PaymentPage;
+    readonly paymentAdyenPage: PaymentAdyenPage;
 
     readonly payNowButton: Locator;
     readonly paypalButton: Locator;
+    readonly payPalAdyenButton: Locator;
+    readonly payPalLaunchAdyenButton: Locator;
+    readonly afterpayAdyenButton: Locator;
+    readonly afterpayLaunchAdyenButton: Locator;
     readonly payInFourButton: Locator;
     readonly payAtAppointmentButton: Locator;
 
@@ -28,9 +34,20 @@ export class PaymentMethodPage extends BasePage {
         this.page = page;
         this.paypalPage = new PaypalPage(page);
         this.paymentPage = new PaymentPage(page);
+        this.paymentAdyenPage = new PaymentAdyenPage(page);
 
         this.payNowButton = this.page.locator('[buttonlabel="Pay now"]'); // credit and paypal options behind this button
         this.paypalButton = this.page.frameLocator('iframe[name="card-frame"]').locator('div[id="paypalParentDiv"]');
+
+        // Ayden Paypal button
+        this.payPalAdyenButton = this.page.getByRole('radio', { name: 'PayPal' });
+        this.payPalLaunchAdyenButton = this.page.frameLocator('iframe[title="PayPal-paypal"]:first-of-type').locator('div[role="link"][class*="paypal-button"]');
+
+        // Ayden Afterpay buttons
+        this.afterpayAdyenButton = this.page.getByRole('radio', { name: 'Afterpay' });
+        this.afterpayLaunchAdyenButton = this.page.getByRole('button', { name: 'Continue to Afterpay' });
+
+
         this.payInFourButton = this.page.locator('[buttonlabel="Pay in 4 installments"]'); // Afterpay        
         this.payAtAppointmentButton = this.page.locator('[buttonlabel="Pay at my appointment"]'); 
         
@@ -40,22 +57,24 @@ export class PaymentMethodPage extends BasePage {
         this.submitButton = this.page.getByRole('button', { name: 'Submit' });
     }
 
-    async executePayment(paymentDetails: IPaymentDetails, claimDetails: IClaimDetails, servicePackage: ServicePackage) {
+    async executePayment(paymentDetails: IPaymentDetails, paymentDetailsAdyen: IPaymentDetailsAdyen, claimDetails: IClaimDetails, servicePackage: ServicePackage) {
         const browserContext = this.page.context();
 
-        switch (paymentDetails.paymentType) {
+        switch (paymentDetailsAdyen?.paymentType ?? paymentDetails?.paymentType) {            case PaymentType.Credit:
-            case PaymentType.Credit:
                 await this.payNowButton.click();
                 await this.textReminderNoButton.click();
                 await this.continueToCheckoutButton.click();
-                await this.selectCreditCard(paymentDetails);
+                await this.selectCreditCard(paymentDetailsAdyen);
                 break;
             case PaymentType.Paypal:
                 await this.payNowButton.click();
                 await this.textReminderNoButton.click();
                 await this.continueToCheckoutButton.click();
-                await this.selectPaypal();
+
-                await this.paypalPage.completePaypalPurchase(paymentDetails);
+                const paypalPopup = await this.selectPaypal();
+                const paypalPage = new PaypalPage(paypalPopup);
+
+                await paypalPage.completePaypalPurchase(paymentDetailsAdyen);
                 break;
             case PaymentType.AfterPay:
                 await this.payInFourButton.click();
@@ -63,11 +82,11 @@ export class PaymentMethodPage extends BasePage {
                 await this.continueToCheckoutButton.click();
 
                 // Capture popup
-                const afterpayPopup = await browserContext.waitForEvent('page');
+                const afterpayPage = await this.selectAfterpayAdyen();
-                const afterpayPage = new AfterpayPage(afterpayPopup);
+                const afterpayAdyenPage = new AfterpayPage(afterpayPage);
 
                 // Execute payment
-                await afterpayPage.executeAfterpayPayment(paymentDetails, claimDetails, servicePackage);
+                await afterpayAdyenPage.executeAfterpayPayment(paymentDetailsAdyen, claimDetails, servicePackage);
                 break;
 
             case PaymentType.PayAtService:
@@ -80,13 +99,25 @@ export class PaymentMethodPage extends BasePage {
                 break;
         }
     }
-
+    async selectAfterpayAdyen(): Promise<Page> {
-    async selectPaypal() {
+        await this.afterpayAdyenButton.click();
-        await this.paypalButton.click();
+        await this.afterpayLaunchAdyenButton.click();
+        //await this.page.waitForLoadState('networkidle');
+        return this.page;
     }
 
-    async selectCreditCard(paymentDetails: IPaymentDetails) {
+    async selectPaypal(): Promise<Page>  {
-        await this.paymentPage.populateCreditCardDetails(paymentDetails);
+        await this.payPalAdyenButton.click();
+        const paypalPage = this.page.waitForEvent('popup');
+        await this.payPalLaunchAdyenButton.click();
+        const paypalPopup = await paypalPage;
+        await paypalPopup.waitForLoadState();
+        return paypalPopup;
+    }
+
+    async selectCreditCard(paymentDetailsAdyen: IPaymentDetailsAdyen) {
+        await this.paymentAdyenPage.populateCreditCardDetails(paymentDetailsAdyen);
+        await this.paymentAdyenPage.payButton.click();
     }
  
     async selectPayAtAppointment() {

playwright-tests/pages/PaymentPage.ts

@@ -1,6 +1,5 @@
 import { type Locator, type Page } from '@playwright/test';
 import { BasePage } from './BasePage';
-import { AfterpayPage } from './AfterpayPage';
 import { IPaymentDetails } from '@business-logic/types/CustomerDetails';
 
 export class PaymentPage extends BasePage {

playwright-tests/pages/PaypalPage.ts

@@ -1,6 +1,6 @@
 import { expect, type Locator, type Page } from "@playwright/test";
 import { BasePage } from "./BasePage";
-import { IPaymentDetails } from "@business-logic/types/CustomerDetails";
+import { IPaymentDetailsAdyen } from "@business-logic/types/CustomerDetails";
 
 export class PaypalPage extends BasePage {
   readonly page: Page;
@@ -13,7 +13,7 @@ export class PaypalPage extends BasePage {
   constructor(page: Page) {
     super(page);
     this.page = page;
-    this.usernameTextBox = page.locator("#email");
+    this.usernameTextBox = page.getByRole("textbox", { name: "Email or mobile number" });
     this.nextButton = page.getByRole("button", { name: "Next" });
     this.passwordTextBox = page.getByRole("textbox", { name: "Password" });
     this.paypalLoginButton = page.getByRole("button", {
@@ -23,16 +23,16 @@ export class PaypalPage extends BasePage {
     this.payButton = page.getByRole("button", { name: "Pay $" });
   }
 
-  async completePaypalPurchase(paymentDetails: IPaymentDetails) {
+  async completePaypalPurchase(paymentDetailsAdyen: IPaymentDetailsAdyen) {
 
     await expect(async () => {
-      await this.usernameTextBox.fill(paymentDetails.username!);
+      await this.usernameTextBox.fill(paymentDetailsAdyen.username!);
       await this.nextButton.waitFor({ state: 'visible', timeout: 5000 });
       await this.nextButton.click();
       await expect(this.passwordTextBox).toBeVisible({ timeout: 5000 });
   }).toPass({ timeout: 30000 });
 
-    await this.passwordTextBox.fill(paymentDetails.password!);
+    await this.passwordTextBox.fill(paymentDetailsAdyen.password!);
     await this.paypalLoginButton.click();
     await this.payButton.click();
   }