Merge branch 'develop' into 8661/fix-positioning-of-bnpl-when-woo-gc-…

…plugin-present

.github/actions/e2e-pw/run-log-tests/action.yml

@@ -0,0 +1,17 @@
+name: 'Run Tests'
+description: 'Runs Playwright E2E tests'
+
+runs:
+    using: 'composite'
+    steps:
+        - name: First Run Playwright E2E Tests
+          id: first_run_e2e_pw_tests
+          # Use +e to trap errors when running E2E tests.
+          shell: /bin/bash +e {0}
+          run: npm run test:e2e-pw-ci
+        - uses: actions/upload-artifact@v3
+          if: always()
+          with:
+              name: playwright-report
+              path: playwright-report/
+              retention-days: 7

.github/workflows/e2e-pw-pull-request.yml

@@ -0,0 +1,74 @@
+name: E2E Playwright Tests - Pull Request
+
+on:
+    pull_request:
+        branches:
+            - develop
+            - trunk
+    workflow_dispatch:
+    workflow_call:
+        inputs:
+            wcpay-use-build-artifact:
+                type: boolean
+                required: false
+                default: false
+            repo-branch:
+                type: string
+                required: false
+                description: 'Branch to be used for running tests'
+
+env:
+    E2E_GH_TOKEN: ${{ secrets.E2E_GH_TOKEN }}
+    WCP_DEV_TOOLS_REPO: ${{ secrets.WCP_DEV_TOOLS_REPO }}
+    WCP_DEV_TOOLS_BRANCH: 'trunk'
+    WCP_SERVER_REPO: ${{ secrets.WCP_SERVER_REPO }}
+    WC_SUBSCRIPTIONS_REPO: ${{ secrets.WC_SUBSCRIPTIONS_REPO }}
+    E2E_BLOG_ID: ${{ secrets.E2E_BLOG_ID }}
+    E2E_BLOG_TOKEN: ${{ secrets.E2E_BLOG_TOKEN }}
+    E2E_USER_TOKEN: ${{ secrets.E2E_USER_TOKEN }}
+    WC_E2E_SCREENSHOTS: 1
+    E2E_SLACK_CHANNEL: ${{ secrets.E2E_SLACK_CHANNEL }}
+    E2E_SLACK_TOKEN: ${{ secrets.E2E_SLACK_TOKEN }}
+    E2E_USE_LOCAL_SERVER: false
+    E2E_RESULT_FILEPATH: 'tests/e2e/results.json'
+    WCPAY_USE_BUILD_ARTIFACT: ${{ inputs.wcpay-use-build-artifact }}
+    WCPAY_ARTIFACT_DIRECTORY: 'zipfile'
+    NODE_ENV: 'test'
+    FORCE_E2E_DEPS_SETUP: true
+
+concurrency:
+    group: ${{ github.workflow }}-${{ github.ref }}
+    cancel-in-progress: true
+
+jobs:
+    wcpay-e2e-tests:
+        runs-on: ubuntu-latest
+
+        name: WC - latest
+
+        env:
+            E2E_WP_VERSION: 'latest'
+            E2E_WC_VERSION: 'latest'
+
+        steps:
+            - name: Checkout WCPay repository
+              uses: actions/checkout@v4
+              with:
+                  ref: ${{ inputs.repo-branch || github.ref }}
+
+            - name: 'Download WooCommerce Payments build file'
+              if: ${{ inputs.wcpay-use-build-artifact }}
+              uses: actions/download-artifact@v4
+              with:
+                  name: woocommerce-payments
+                  path: ${{ env.WCPAY_ARTIFACT_DIRECTORY }}
+
+            - name: Setup E2E environment
+              uses: ./.github/actions/e2e/env-setup
+
+            - name: Install Playwright
+              shell: bash
+              run: npx playwright install chromium
+
+            - name: Run tests, upload screenshots & logs
+              uses: ./.github/actions/e2e-pw/run-log-tests

.gitignore

@@ -87,5 +87,12 @@ tests/e2e/screenshots
 # E2E Performance test results
 tests/e2e/reports
 
+# E2E Playwright
+/playwright-report/
+/blob-report/
+tests/e2e-pw/.auth/
+tests/e2e-pw/test-results/
+tests/e2e-pw/playwright/.cache/
+tests/e2e-pw/tests/e2e-pw/.auth/*
 # Slate docs
 docs/rest-api/build/*

changelog/add-8197-overview-survey

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add User Satisfaction Survey for Payments Overview Widget

changelog/add-8511-add-payment-activity-data-tooltip

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Non user-facing changes. Behind feature flag. Add tooltip messages to tiles within Payment activity widget

changelog/add-monitoring-related-headers

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: We are adding a new header to REST backend requests in order to get insights into requests latency.
+
+

changelog/fix-8672-remove-obsolete-docker-compose-version

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Remove obsolete docker-compose key `version`

changelog/remove-deprecated-param-from-asset-data-registry

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Remove deprecated param from asset data registry interface.

changelog/try-playwright-e2e-tests

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add Playwright e2e test suite ready for incremental migration and visual regression testing

client/components/payment-activity/index.tsx

@@ -4,19 +4,23 @@
 import * as React from 'react';
 import { Card, CardBody, CardHeader } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import interpolateComponents from '@automattic/interpolate-components';
 
 /**
  * Internal dependencies
  */
 
 import EmptyStateAsset from 'assets/images/payment-activity-empty-state.svg?asset';
-import interpolateComponents from '@automattic/interpolate-components';
 import PaymentActivityData from './payment-activity-data';
+import Survey from './survey';
+import { WcPayOverviewSurveyContextProvider } from './survey/context';
 import './style.scss';
 
 const PaymentActivity: React.FC = () => {
 	const { lifetimeTPV } = wcpaySettings;
 	const hasAtLeastOnePayment = lifetimeTPV > 0;
+	const isOverviewSurveySubmitted =
+		wcpaySettings.isOverviewSurveySubmitted ?? false;
 
 	return (
 		<Card>
@@ -50,6 +54,12 @@ const PaymentActivity: React.FC = () => {
 					</div>
 				) }
 			</CardBody>
+
+			{ ! isOverviewSurveySubmitted && hasAtLeastOnePayment && (
+				<WcPayOverviewSurveyContextProvider>
+					<Survey />
+				</WcPayOverviewSurveyContextProvider>
+			) }
 		</Card>
 	);
 };

client/components/payment-activity/payment-activity-data.tsx

@@ -5,16 +5,17 @@ import * as React from 'react';
 import moment from 'moment';
 import { __ } from '@wordpress/i18n';
 import HelpOutlineIcon from 'gridicons/dist/help-outline';
+import interpolateComponents from '@automattic/interpolate-components';
 
 /**
  * Internal dependencies.
  */
+import InlineNotice from '../inline-notice';
 import PaymentDataTile from './payment-data-tile';
 import { ClickTooltip } from '../tooltip';
 import { usePaymentActivityData } from 'wcpay/data';
 import { getAdminUrl } from 'wcpay/utils';
 import type { DateRange } from './types';
-
 import './style.scss';
 
 /**
@@ -50,16 +51,35 @@ const PaymentActivityData: React.FC = () => {
 				currencyCode={ storeCurrency }
 				tooltip={
 					<ClickTooltip
-						className="total-payment-volume__tooltip"
+						className="wcpay-payment-activity-data__total-payment-volume__tooltip"
+						maxWidth={ '294px' }
 						buttonIcon={ <HelpOutlineIcon /> }
 						buttonLabel={ __(
 							'Total payment volume tooltip',
 							'woocommerce-payments'
 						) }
-						content={ __(
-							'test total payment volume content',
-							'woocommerce-payments'
-						) }
+						content={
+							<>
+								{ interpolateComponents( {
+									mixedString: __(
+										'{{strong}}Total payment volume{{/strong}} is gross value of payments successfully processed over a given timeframe.',
+										'woocommerce-payments'
+									),
+									components: {
+										strong: <strong />,
+									},
+								} ) }
+								<InlineNotice
+									className="wcpay-payment-activity-data__total-payment-volume__tooltip__notice"
+									isDismissible={ false }
+								>
+									{ __(
+										'Total payment volume = Charges - Refunds - Disputes',
+										'woocommerce-payments'
+									) }
+								</InlineNotice>
+							</>
+						}
 					/>
 				}
 				amount={ totalPaymentVolume }
@@ -89,7 +109,15 @@ const PaymentActivityData: React.FC = () => {
 								'Charges tooltip',
 								'woocommerce-payments'
 							) }
-							content={ __( 'test charge content' ) }
+							content={ interpolateComponents( {
+								mixedString: __(
+									'A {{strong}}charge{{/strong}} is the amount billed to your customer’s payment method.',
+									'woocommerce-payments'
+								),
+								components: {
+									strong: <strong />,
+								},
+							} ) }
 						/>
 					}
 					amount={ charges }
@@ -143,10 +171,15 @@ const PaymentActivityData: React.FC = () => {
 								'Fees tooltip',
 								'woocommerce-payments'
 							) }
-							content={ __(
-								'test fees content',
-								'woocommerce-payments'
-							) }
+							content={ interpolateComponents( {
+								mixedString: __(
+									'{{strong}}Fees{{/strong}} includes fees on payments as well as disputes.',
+									'woocommerce-payments'
+								),
+								components: {
+									strong: <strong />,
+								},
+							} ) }
 						/>
 					}
 					amount={ fees }

client/components/payment-activity/style.scss

@@ -19,7 +19,7 @@
 			padding: 0 !important;
 			&__empty-state-wrapper {
 				text-align: center;
-				color: #949494;
+				color: $gray-600;
 				padding: 16px 0 19px;
 			}
 		}
@@ -34,6 +34,17 @@
 	@include breakpoint( '<660px' ) {
 		grid-template-columns: 1fr;
 		padding: 24px;
+
+		> .wcpay-payment-data-highlights__item:nth-of-type( 1 ) {
+			// Mobile view of the Total payment volume tile.
+			border-bottom: 1px solid $gray-200;
+			padding-top: 0;
+			padding-bottom: 24px;
+
+			.wcpay-tooltip__tooltip-wrapper {
+				left: 45px !important;
+			}
+		}
 	}
 
 	.wcpay-payment-data-highlights {
@@ -127,9 +138,7 @@
 			flex-direction: column;
 		}
 	}
-}
 
-#wcpay-payment-activity-data {
 	&__total-payment-volume {
 		border-left: none;
 		align-self: stretch;
@@ -142,10 +151,23 @@
 			@include amount-styles;
 		}
 
-		@include breakpoint( '<660px' ) {
-			border-bottom: 1px solid $gray-200;
-			padding-top: 0;
-			padding-bottom: 24px;
+		&__tooltip {
+			.wcpay-inline-notice.components-notice {
+				margin-top: 8px;
+				margin-right: 0;
+				padding: 8px;
+				color: $studio-blue-70;
+
+				.components-notice__content {
+					font-size: 11px;
+					line-height: 16px;
+					margin: 0;
+				}
+			}
 		}
 	}
+
+	.wcpay-tooltip__tooltip {
+		line-height: 20px;
+	}
 }