Merge branch 'stage' into MWPW-137111-region-selector-modal

acrobat/scripts/imageReplacer.js

@@ -0,0 +1,39 @@
+import { createTag } from './miloUtils.js';
+
+const cardImageMappings = [
+  { name: 'AMEX_V_MC_D_DU_JCB_PP', filename: 'amex_v_mc_d_du_jcb_pp.jpg' },
+  { name: 'AMEX_V_MC_JCB_JPBANK', filename: 'amex_v_mc_jcb_jpbank.png' },
+  { name: 'AMEX_V_MC_PP', filename: 'amex_v_mc_pp.jpg' },
+  { name: 'AMEX_VISA_MC_D_DU_ELC_PP_BOLETO', filename: 'amex_visa_mc_d_du_elc_pp_boleto.jpg' },
+  { name: 'AMEX_VISA_MC_D_DU_JCB_PAYPAL', filename: 'amex_visa_mc_d_du_jcb_paypal.jpg' },
+  { name: 'AMEX_VISA_MC_D_PAYPAL', filename: 'amex_visa_mc_d_paypal.jpg' },
+  { name: 'AMEX_VISA_MC_JCB_JPBANK_JPSTORE', filename: 'amex_visa_mc_jcb_jpbank_jpstore.png' },
+  { name: 'V_MC_DD_PP', filename: 'v_mc_dd_pp.jpg' },
+  { name: 'V_MC', filename: 'v_mc.jpg' },
+];
+
+export default async function replacePlaceholdersWithImages(documentElement) {
+  const paragraphs = documentElement.querySelectorAll('p');
+  await createTag.then((tag) => {
+    paragraphs.forEach((p) => {
+      cardImageMappings.forEach((mapping) => {
+        const cardName = p.innerHTML.trim();
+        const matchedImage = cardName === mapping.name;
+        if (matchedImage) {
+          const imagePath = `/acrobat/img/icons/credit-cards-${mapping.filename}`;
+          const imgAttributes = {
+            src: imagePath,
+            loading: 'lazy',
+            'data-local': 'credit-cards',
+          };
+          const imgElement = tag('img', imgAttributes);
+          imgElement.onerror = async () => {
+            window.lana?.log(`Error loading image for credit-card placeholder: ${cardName}`);
+            imgElement.remove();
+          };
+          p.replaceWith(imgElement);
+        }
+      });
+    });
+  });
+}

acrobat/scripts/scripts.js

@@ -309,7 +309,7 @@ const { ietf } = getLocale(locales);
   loadStyles(paths);
 
   // Import base milo features and run them
-  const { loadArea, setConfig, loadLana } = await import(`${miloLibs}/utils/utils.js`);
+  const { loadArea, setConfig, loadLana, getMetadata } = await import(`${miloLibs}/utils/utils.js`);
   addLocale(ietf);
 
   setConfig({ ...CONFIG, miloLibs });
@@ -339,4 +339,9 @@ const { ietf } = getLocale(locales);
       window.dispatchEvent(imsIsReady);
     }
   }, 1000);
+
+  if (getMetadata('commerce')) {
+    const { default: replacePlaceholdersWithImages } = await import('./imageReplacer.js');
+    replacePlaceholdersWithImages(document);
+  }
 }());

acrobat/styles/styles.css

@@ -246,6 +246,10 @@ div.how-to {
   .fsw > div > div {
     min-height: calc(100vh - 100px) !important;
   }
+
+  header:not(.global-navigation)  ~ main {
+    margin-top: 64px;
+  }
 }
 
 div.how-to ol li::before{

test/e2e/frictionless/features/regression/caas.feature

@@ -0,0 +1,32 @@
+Feature: CaaS Block
+
+  Background:
+    Given I have a new browser context
+
+  @MWPW-132351 @regression-caas
+  Scenario Outline: CaaS block on frictionless
+    Given I go to the <Verb> page
+    Then I should see the CaaS block
+    Then I should see the 'More resources' header
+    Then I should see the CaaS block cards
+    Then I click the "Read now" button inside the CaaS card
+    Then I switch to the new page after clicking "Read now" button in the CaaS
+    Then I should not see the address bar contains "<Verb>"
+    Examples:
+      | Verb                  |
+      | add-pages-to-pdf      |
+      | compress-pdf          |
+      | convert-pdf           |
+      | delete-pdf-pages      |
+      | excel-to-pdf          |
+      | extract-pdf-pages     |
+      | merge-pdf             |
+      | password-protect-pdf  |
+      | pdf-editor            |
+      | pdf-to-excel          |
+      | pdf-to-jpg            |
+      | request-signature     |
+      | rotate-pdf            |
+      | sign-pdf              |
+      | split-pdf             |
+      | word-to-pdf           |

test/e2e/frictionless/features/regression/converter.feature

@@ -82,4 +82,39 @@ Feature: Frictionless Converter Block
 
   Examples:
       | Verb     | File                |
-      | sign-pdf | test-files/test.pdf |
+      | sign-pdf | test-files/test.pdf |
+
+  @MWPW-137180 @regression @converter
+  Scenario Outline: L2 Verbs - Upload, rotate and download
+    Given I go to the <Verb> page
+    Then I upload the files "<Files>"
+    Then I rotate right the uploaded files
+    Then I rotate left first uploaded file
+    Then I wait for 2 seconds
+    Then I save rotated files
+    Then I download the converted file
+
+    Examples:
+      | Verb       | Files                                    |
+      | rotate-pdf | test-files/test.pdf,test-files/test2.pdf |
+
+  @MWPW-137251 @regression @converter
+  Scenario Outline: L2 Verbs - Upload and sign in
+    Given I go to the <Verb> page
+    Then I upload the file "<File>"
+    Then I click "Add signature"
+    Then I fill up signature input
+    Then I click "Add initials"
+    Then I fill up signature input
+    Then I click "Add signature"
+    Then I sign up the document
+    Then I should see signature
+    Then I click "Add initials"
+    Then I sign up the document
+    Then I should see initials
+    Then I wait for 2 seconds
+    Then I click "Sign in to download"
+
+    Examples:
+      | Verb       | File                 |
+      | sign-pdf   | test-files/test.pdf  |

test/e2e/frictionless/features/regression/eventwrapper.feature

@@ -50,4 +50,4 @@ Feature: Frictionless Event Wrapper Block
 
   Examples:
       | Verb       | File                |
-      | pdf-to-jpg | test-files/test.pdf |
+      | pdf-to-jpg | test-files/test.pdf |

test/e2e/frictionless/page-objects/caas.page.js

@@ -0,0 +1,27 @@
+import { classes } from "polytype";
+import { DcGnavPage } from "./dcgnav.page";
+import { PdfWidgetSection } from "./pdfwidget.section";
+
+export class CaaSPage extends classes(DcGnavPage, PdfWidgetSection) {
+  constructor(contentPath) {
+    let locContentPath = contentPath;
+    // if locale is specified, add to the path
+    if (global.config.profile.locale) {
+      locContentPath = locContentPath.replace(/^\/*|\/*$/g, '');
+      if (global.config.profile.locale === 'us') {
+        locContentPath = `/${locContentPath}`;
+      } else {
+        locContentPath = `/${global.config.profile.locale}/${locContentPath}`;
+      }
+    }
+    super({
+      super: DcGnavPage,
+      arguments: [locContentPath],
+    });
+    this.buildProps({
+      caas: '#caas',
+      caasFragment: '.fragment[data-path*="caas"]>>nth=0',
+      caasButton: 'a[data-testid="consonant-BtnInfobit"]'
+    });
+  }
+}

test/e2e/frictionless/page-objects/passwordprotectpdf.page.js

@@ -0,0 +1,7 @@
+import { FrictionlessPage } from './frictionless.page';
+
+export class PasswordProtectPdfPage extends FrictionlessPage {
+  constructor() {
+    super("/acrobat/online/password-protect-pdf");
+  }
+}

test/e2e/frictionless/page-objects/pdfwidget.section.js

@@ -24,6 +24,11 @@ export class PdfWidgetSection extends Section {
       dcWebDocumentsTab: '//div[@role="tab"]//span[text()="Documents"]/..',
       dcWebCheckAllFiles: '//div[contains(@class, "Files")]//input[@title="Select All"]',
       dcWebDelete: '//button[@data-test-id="delete-action-button"]',
+      rotateRightButton: 'button[id="rotate-right"]',
+      addSignature: 'div[data-testid*="add-signature"]',
+      addInitials: 'div[data-testid*="add-initials"]',
+      applyButton: 'button[data-test-id="apply-btn"]',
+      signInButton: 'button[data-test-id="sign-in-btn"]',
     });
   }
 

test/e2e/frictionless/step-definitions/dc.steps.js

@@ -21,6 +21,8 @@ import { PdfEditorPage } from "../page-objects/pdfeditor.page";
 import { MergePdfPage } from "../page-objects/mergepdf.page";
 import { CompressPdfPage } from "../page-objects/compresspdf.page";
 import { FrictionlessPage } from "../page-objects/frictionless.page";
+import { PasswordProtectPdfPage } from "../page-objects/passwordprotectpdf.page";
+import { CaaSPage } from "../page-objects/caas.page";
 import { cardinal } from "../support/cardinal";
 import { expect } from "@playwright/test";
 const os = require("os");
@@ -63,7 +65,7 @@ async function enableNetworkLogging(page) {
       networklogs.push(route.request());
       route.continue();
     });
-  }  
+  }
 }
 }
 
@@ -94,6 +96,7 @@ Then(/^I go to the ([^\"]*) page$/, async function (verb) {
     "pdf-editor": PdfEditorPage,
     "merge-pdf": MergePdfPage,
     "compress-pdf": CompressPdfPage,
+    "password-protect-pdf": PasswordProtectPdfPage,
   }[verb];
   this.page = new pageClass();
 
@@ -161,6 +164,50 @@ Then(/^I merge the uploaded files$/, async function () {
   await this.page.mergeButton.click({ timeout: 120000 });
 });
 
+Then(/^I save rotated files$/, async function () {
+  this.context(FrictionlessPage);
+  await this.page.mergeButton.click({ timeout: 120000 });
+});
+
+Then(/^I rotate right the uploaded files$/, async function () {
+  this.context(FrictionlessPage);
+  await this.page.rotateRightButton.click({ timeout: 120000 });
+});
+
+Then(/^I rotate left first uploaded file$/, async function () {
+  let file = "//div[@data-test-id='grid-item-wrapper-0']";
+  let fileLeftRotateBtn = `${file}//button[@data-test-id='rotate-left-button']`;
+  await this.page.native.locator(file).click({timeout: 2000});
+  await this.page.native.locator(fileLeftRotateBtn).click({timeout: 2000});
+});
+
+Then(/^I click "Add (signature|initials)"$/, async function (sign) {
+  this.context(FrictionlessPage);
+  const elementToClick = sign === 'signature' ? this.page.addSignature : this.page.addInitials;
+  await elementToClick.click({ timeout: 120000 });
+});
+
+Then(/^I fill up signature input$/, async function () {
+  let signature = "//input[@data-test-id='type-sign-canvas']";
+  await this.page.native.locator(signature).fill('Test signature');
+  await this.page.applyButton.click({timeout: 2000});
+});
+
+Then(/^I sign up the document$/, async function () {
+  let document = '#pageview-current-page';
+  await this.page.native.locator(document).click({timeout: 2000});
+});
+
+Then(/^I should see (signature|initials)$/, async function (sign) {
+  const element = sign === 'signature' ? "//div[@data-testid='fns-field-0']" : "//div[@data-testid='fns-field-1']";
+  await expect(this.page.native.locator(element)).toBeVisible();
+});
+
+Then(/^I click "Sign in to download"$/, async function () {
+  this.context(FrictionlessPage);
+  await this.page.signInButton.click({ timeout: 120000 });
+});
+
 Then(/^I should not see any browser console errors$/, async function () {
   if (this.page.consoleMessages) {
     const errors = this.page.consoleMessages.filter(
@@ -204,17 +251,17 @@ Then(/^I submit review feedback$/, async function () {
   await this.page.reviewStartInput(3).click({timeout: 5000});
   await this.page.reviewCommentField.fill("Test");
   await this.page.reviewStartInput(5).click();
-  await this.page.reviewCommentSubmit.click();   
+  await this.page.reviewCommentSubmit.click();
 });
 
 Then(/^I should see the review stats$/, async function () {
   this.context(FrictionlessPage);
-  await expect(this.page.reviewStats).toBeVisible({timeout: 5000});  
+  await expect(this.page.reviewStats).toBeVisible({timeout: 5000});
 });
 
 Then(/^I should see the review submit response$/, async function () {
   this.context(FrictionlessPage);
-  await expect(this.page.reviewSubmitResponse).toBeVisible({timeout: 5000});  
+  await expect(this.page.reviewSubmitResponse).toBeVisible({timeout: 5000});
 });
 
 Then(/^I download the pdf from DC web$/, async function () {
@@ -285,7 +332,7 @@ Then(/^I (screenshot|should be able to open) the submenu of the (.*) menu item(?
 
   let menuItems = items.replace(/ and /g, ",").split(",");
   menuItems = menuItems.map((x) => x.trim()).filter((x) => x.length > 0);
-  for (let item of menuItems) {  
+  for (let item of menuItems) {
     const index = cardinal(item);
     await this.page.openSubMenu(index);
     await expect(this.page.fedsPopup).toBeVisible();
@@ -302,12 +349,12 @@ Then(/^I (screenshot|should be able to open) the submenu of the (.*) menu item(?
 
 /***
  * This step is used to compare the current screenshots with the baseline
- * screenshots. 
- * 
+ * screenshots.
+ *
  * Baseline Folder: features/${feature-name}/${platform}/${browser}
- * Current Folder: ${report-dir}/screenshots/${feature-name}/${platform}/${browser} 
+ * Current Folder: ${report-dir}/screenshots/${feature-name}/${platform}/${browser}
  * Diff Image: ${report-dir}/${platform}_${browser}_${image-name}.png
- * 
+ *
  * Command line options:
  * --baseBrowser: Use a different browser to compare with the current browser
 */
@@ -346,7 +393,7 @@ Then(/^I should be able to use the "([^\"]*)" submenu$/, async function (menu) {
 });
 
 Then(/^I select the last item of the submenu of the ([^\"]*) menu item$/, async function (menu) {
-  this.context(FrictionlessPage); 
+  this.context(FrictionlessPage);
   await this.page.openSubMenu(cardinal(menu));
   await this.page.selectFedsPopupItem(-1);
 });
@@ -363,7 +410,7 @@ Then(/^I switch to the new page after clicking "Buy now" button in the header$/,
     this.page.buyNow.click()
   ]);
   await newPage.waitForLoadState();
-  this.page.native = newPage; 
+  this.page.native = newPage;
 });
 
 Then(/^I read expected analytics data with replacements "([^"]*)"$/, async function (replacements) {
@@ -400,3 +447,34 @@ Then(/^I read expected analytics data with replacements "([^"]*)"$/, async funct
 
   this.page.wikiAnalyticsData = events;
 });
+
+Then(/^I should see the CaaS block$/, async function () {
+  this.context(CaaSPage);
+  await expect(this.page.caasFragment).toBeVisible({timeout: 30000});
+  await this.page.native.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+  await expect(this.page.caas).toBeVisible({timeout: 30000});
+});
+
+Then(/^I should see the 'More resources' header$/, async function () {
+  const headerContent = await this.page.caasFragment.locator('h2').first().textContent();
+  await expect(headerContent).toEqual('More resources');
+});
+
+Then(/^I should see the CaaS block cards$/, async function () {
+  await expect(this.page.caas.locator('.consonant-Card').first()).toBeVisible({timeout: 30000});
+  const cardCount = await this.page.caas.locator('.consonant-Card').count();
+  expect(cardCount).toBeGreaterThan(1);
+});
+
+Then(/^I click the "Read now" button inside the CaaS card$/, async function () {
+  await this.page.caasButton.nth(0).click();
+});
+
+Then(/^I switch to the new page after clicking "Read now" button in the CaaS$/, async function () {
+  const [newPage] = await Promise.all([
+    PW.context.waitForEvent('page'),
+    this.page.caasButton.nth(0).click()
+  ]);
+  await newPage.waitForLoadState();
+  this.page.native = newPage;
+});