[WIP] Add payment method promotions

.claude/CLAUDE.md

@@ -186,3 +186,5 @@ npm run i18n:pot                    # Generate translations
 - Test files mirror source structure
 - PHP tests require Docker - ensure it's running before executing tests
 - Use `npm run test:php` to run all tests or edit the command to pass PHPUnit filters
+- When pushing, always push only the current branch: `git push origin HEAD` (not `git push` which tries to push all configured branches)
+- When pulling, always pull only the current branch: `git pull origin $(git branch --show-current)` or `git pull --rebase origin HEAD`

.gitignore

@@ -12,6 +12,7 @@ project.properties
 .sublimelinterrc
 .cursor/
 **/.claude/**/*.local.*
+.claude/local/
 .zed/
 .phpactor.json
 

changelog/add-WOOPMNT-5460-discount-badges-to-payment-methods

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add discount badges to payment methods with active promotions in settings.

changelog/woopmnt-5458-build-klarna-promotion-spotlight-component

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Add generic Spotlight component for promotional announcements
+
+

changelog/woopmnt-5463-display-spotlight-promotions

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Display spotlight promotions on WooPayments pages and WooCommerce payment settings.

changelog/woopmnt-5496-add-logic-to-woopayments-client-to-fetch-promotional-details

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add client-side logic to fetch promotional details from server

client/components/promotional-badge/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PromotionalBadge renders correctly with all props 1`] = `
+<div>
+  <span
+    class="chip chip-primary wcpay-promotional-badge"
+  >
+    30% off fees through Dec 31, 2026
+    <button
+      class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
+      type="button"
+    >
+      <div
+        class="wcpay-tooltip__content-wrapper"
+      >
+        <div
+          aria-label="View promotion details"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            class="gridicon gridicons-info-outline"
+            height="16"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M13 9h-2V7h2v2zm0 2h-2v6h2v-6zm-1-7c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8m0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"
+              />
+            </g>
+          </svg>
+        </div>
+      </div>
+    </button>
+  </span>
+</div>
+`;

client/components/promotional-badge/__tests__/index.test.tsx

@@ -0,0 +1,120 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import PromotionalBadge from '../';
+
+describe( 'PromotionalBadge', () => {
+	test( 'renders the badge with message', () => {
+		render(
+			<PromotionalBadge
+				message="50% off fees"
+				tooltip="You are getting 50% off on processing fees."
+			/>
+		);
+
+		expect( screen.getByText( '50% off fees' ) ).toBeInTheDocument();
+	} );
+
+	test( 'renders with success type by default', () => {
+		const { container } = render(
+			<PromotionalBadge
+				message="25% off fees"
+				tooltip="Discount details"
+			/>
+		);
+
+		const badge = container.querySelector( '.wcpay-promotional-badge' );
+		expect( badge ).toHaveClass( 'chip-success' );
+	} );
+
+	test( 'renders with custom chip type', () => {
+		const { container } = render(
+			<PromotionalBadge
+				message="Limited offer"
+				tooltip="Discount details"
+				type="warning"
+			/>
+		);
+
+		const badge = container.querySelector( '.wcpay-promotional-badge' );
+		expect( badge ).toHaveClass( 'chip-warning' );
+	} );
+
+	test( 'renders the info icon button', () => {
+		render(
+			<PromotionalBadge
+				message="50% off fees"
+				tooltip="Tooltip content"
+				tooltipLabel="Discount details"
+			/>
+		);
+
+		const tooltipButton = screen.getByRole( 'button', {
+			name: /discount details/i,
+		} );
+		expect( tooltipButton ).toBeInTheDocument();
+	} );
+
+	test( 'shows tooltip content when clicking the info icon', () => {
+		render(
+			<PromotionalBadge
+				message="50% off fees"
+				tooltip="You are getting 50% off on processing fees."
+				tooltipLabel="Discount details"
+			/>
+		);
+
+		const tooltipButton = screen.getByRole( 'button', {
+			name: /discount details/i,
+		} );
+		fireEvent.click( tooltipButton );
+
+		expect(
+			screen.getByText( 'You are getting 50% off on processing fees.' )
+		).toBeInTheDocument();
+	} );
+
+	test( 'uses default tooltip label when not provided', () => {
+		render(
+			<PromotionalBadge
+				message="50% off fees"
+				tooltip="Tooltip content"
+			/>
+		);
+
+		const tooltipButton = screen.getByRole( 'button', {
+			name: /more information/i,
+		} );
+		expect( tooltipButton ).toBeInTheDocument();
+	} );
+
+	test( 'applies chip base class', () => {
+		const { container } = render(
+			<PromotionalBadge message="Test badge" tooltip="Test tooltip" />
+		);
+
+		const badge = container.querySelector( '.wcpay-promotional-badge' );
+		expect( badge ).toHaveClass( 'chip' );
+	} );
+
+	test( 'renders correctly with all props', () => {
+		const { container } = render(
+			<PromotionalBadge
+				message="30% off fees through Dec 31, 2026"
+				tooltip="You are getting 30% off on processing fees for the first $1,000 of total payment volume or through Dec 31, 2026."
+				type="primary"
+				tooltipLabel="View promotion details"
+			/>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );

client/components/promotional-badge/index.tsx

@@ -0,0 +1,53 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import clsx from 'clsx';
+import InfoOutlineIcon from 'gridicons/dist/info-outline';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { ChipType } from 'wcpay/components/chip';
+import { ClickTooltip } from 'wcpay/components/tooltip';
+import './style.scss';
+
+interface PromotionalBadgeProps {
+	/** The badge text displayed in the chip */
+	message: string;
+	/** The tooltip content shown when clicking the info icon */
+	tooltip: string;
+	/** The chip type/color (defaults to "success") */
+	type?: ChipType;
+	/** Accessible label for the tooltip button */
+	tooltipLabel?: string;
+}
+
+const PromotionalBadge: React.FC< PromotionalBadgeProps > = ( {
+	message,
+	tooltip,
+	type = 'success',
+	tooltipLabel = __( 'More information', 'woocommerce-payments' ),
+} ) => {
+	const classNames = clsx(
+		'chip',
+		`chip-${ type }`,
+		'wcpay-promotional-badge'
+	);
+
+	return (
+		<span className={ classNames }>
+			{ message }
+			<ClickTooltip
+				buttonIcon={ <InfoOutlineIcon /> }
+				buttonLabel={ tooltipLabel }
+				content={ tooltip }
+			/>
+		</span>
+	);
+};
+
+export default PromotionalBadge;

client/components/promotional-badge/style.scss

@@ -0,0 +1,21 @@
+/** @format */
+
+.wcpay-promotional-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+
+	.wcpay-tooltip__content-wrapper {
+		display: inline-flex;
+		align-items: center;
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		cursor: pointer;
+
+		> div {
+			margin-right: 0;
+		}
+	}
+}