From aa69c4a41a09ffb623fc7318755420a710e01032 Mon Sep 17 00:00:00 2001
From: RaduCristianPopescu
 <119046336+RaduCristianPopescu@users.noreply.github.com>
Date: Thu, 25 Sep 2025 17:49:36 +0300
Subject: [PATCH 1/3] feat: add watermark to the advanced submenu

---
 .../parts/connected/settings/Menu.js          |  4 +
 .../parts/connected/settings/Watermark.js     | 79 +++++++++++++++++++
 .../parts/connected/settings/index.js         | 26 +++---
 inc/admin.php                                 |  9 +++
 4 files changed, 109 insertions(+), 9 deletions(-)
 create mode 100644 assets/src/dashboard/parts/connected/settings/Watermark.js

diff --git a/assets/src/dashboard/parts/connected/settings/Menu.js b/assets/src/dashboard/parts/connected/settings/Menu.js
index c688113d0..90ebf8b3c 100644
--- a/assets/src/dashboard/parts/connected/settings/Menu.js
+++ b/assets/src/dashboard/parts/connected/settings/Menu.js
@@ -28,6 +28,10 @@ const menuItems = [
 		label: strings.advanced_settings_menu_item,
 		value: 'compression',
 		children: [
+			{
+				label: strings.settings_watermark_menu_item,
+				value: 'watermark'
+			},
 			{
 				label: strings.settings_compression_menu_item,
 				value: 'compression'
diff --git a/assets/src/dashboard/parts/connected/settings/Watermark.js b/assets/src/dashboard/parts/connected/settings/Watermark.js
new file mode 100644
index 000000000..3a5d1a3e2
--- /dev/null
+++ b/assets/src/dashboard/parts/connected/settings/Watermark.js
@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies.
+ */
+import {
+	BaseControl,
+	Button
+} from '@wordpress/components';
+
+import { Icon, external } from '@wordpress/icons';
+
+const Watermark = () => {
+	const { options_strings } = optimoleDashboardApp.strings;
+
+	const containerStyle = {
+		border: '2px solid #DCDCDC',
+		borderRadius: '8px',
+		padding: '16px'
+	};
+
+	return (
+		<>
+			<div>
+				<h1 className="text-xl font-bold">
+					{options_strings.watermark_media_title}
+				</h1>
+				<p className="text-gray-600 mt-2 mb-2" >
+					{options_strings.watermark_media_desc}
+				</p>
+			</div>
+
+			<div style={containerStyle}>
+				<div className="mb-4 space-y-2">
+					<div className="flex items-center gap-2 align-center">
+						<div className="w-2 h-2 bg-gray-900 rounded-full flex-shrink-0"></div>
+						<span className="text-gray-700 text-center">{options_strings.watermark_info_1}</span>
+					</div>
+					<div className="flex items-center gap-2 align-center">
+						<div className="w-2 h-2 bg-gray-900 rounded-full flex-shrink-0"></div>
+						<span className="text-gray-700 text-center ">{options_strings.watermark_info_2}</span>
+					</div>
+					<div className="flex items-center gap-2 align-center">
+						<div className="w-2 h-2 bg-gray-900 rounded-full flex-shrink-0"></div>
+						<span className="text-gray-700 text-center">{options_strings.watermark_info_3}</span>
+					</div>
+				</div>
+
+				<div className="flex gap-4">
+					<Button
+						variant="primary"
+						className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium flex items-center gap-2 hover:bg-blue-700"
+						target="_blank"
+						rel="noopener noreferrer"
+						href="https://dashboard.optimole.com/dashboard"
+					>
+						<Icon
+							icon={external}
+							className="w-4 h-4"
+						/>
+						{options_strings.open_optimole_dashboard}
+					</Button>
+					<Button
+						variant="secondary"
+						className="border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-50"
+						target='_blank'
+						rel='noopener noreferrer'
+						href="https://docs.optimole.com/article/1475-adding-watermarks-to-your-images"
+					>
+						{options_strings.learn_more}
+					</Button>
+				</div>
+				<p className="text-gray-500" style={{ gap: 0 }}>
+					{options_strings.watermark_footer}
+				</p>
+			</div>
+		</>
+	);
+};
+
+export default Watermark;
diff --git a/assets/src/dashboard/parts/connected/settings/index.js b/assets/src/dashboard/parts/connected/settings/index.js
index 4bda66ecb..14b802502 100644
--- a/assets/src/dashboard/parts/connected/settings/index.js
+++ b/assets/src/dashboard/parts/connected/settings/index.js
@@ -10,6 +10,7 @@ import Lazyload from './Lazyload';
 import Exclusions from './Exclusions';
 import OffloadMedia from './OffloadMedia';
 import CloudLibrary from './CloudLibrary';
+import Watermark from './Watermark';
 import { saveSettings } from '../../../utils/api';
 import { toggleDamSidebarLink } from '../../../utils/helpers';
 
@@ -129,16 +130,23 @@ const Settings = ({
 					/>
 				) }
 
+				{ 'watermark' === tab && (
+					<Watermark
+					/>
+				) }
+
 				<div className="flex justify-start items-center gap-5 mt-8">
-					<Button
-						variant="primary"
-						isBusy={ isLoading }
-						disabled={ ! canSave }
-						className="optml__button flex w-full justify-center rounded font-bold min-h-40 basis-1/5"
-						onClick={ onSaveSettings }
-					>
-						{ optimoleDashboardApp.strings.options_strings.save_changes }
-					</Button>
+					{ 'watermark' !== tab && (
+						<Button
+							variant="primary"
+							isBusy={ isLoading }
+							disabled={ ! canSave }
+							className="optml__button flex w-full justify-center rounded font-bold min-h-40 basis-1/5"
+							onClick={ onSaveSettings }
+						>
+							{ optimoleDashboardApp.strings.options_strings.save_changes }
+						</Button>
+					) }
 
 					{ ( 'disabled' === settings.autoquality && 'compression' === tab ) && (
 						<Button
diff --git a/inc/admin.php b/inc/admin.php
index a623a1502..ba7bd5362 100755
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -1655,6 +1655,7 @@ private function get_dashboard_strings() {
 			'dashboard_menu_item'            => __( 'Dashboard', 'optimole-wp' ),
 			'settings_menu_item'             => __( 'Settings', 'optimole-wp' ),
 			'help_menu_item'                 => __( 'Help', 'optimole-wp' ),
+			'settings_watermark_menu_item'   => __( 'Watermark', 'optimole-wp' ),
 			'settings_exclusions_menu_item'  => __( 'Exclusions', 'optimole-wp' ),
 			'settings_resize_menu_item'      => __( 'Resize', 'optimole-wp' ),
 			'settings_compression_menu_item' => __( 'Compression', 'optimole-wp' ),
@@ -1709,6 +1710,14 @@ private function get_dashboard_strings() {
 				'configure_settings'    => __( 'Configure settings', 'optimole-wp' ),
 			],
 			'options_strings'                => [
+				'watermark_media_desc'           => __( 'Protect your brand by adding a watermark to your images. Configure placement, opacity, and rules directly in your Optimole Dashboard.', 'optimole-wp' ),
+				'watermark_media_title'          => __( 'Watermarks', 'optimole-wp' ),
+				'learn_more'                      => __( 'Learn more', 'optimole-wp' ),
+				'open_optimole_dashboard'         => __( 'Open Optimole Dashboard', 'optimole-wp' ),
+				'watermark_footer'      => __( 'Watermark rules and exclusions are fully managed in your Optimole Dashboard.', 'optimole-wp' ),
+				'watermark_info_1' => __( 'Choose from multiple watermark positions and set opacity.', 'optimole-wp' ),
+				'watermark_info_2' => __( 'Set different watermarks for different image sizes.', 'optimole-wp' ),
+				'watermark_info_3' => __( 'Create rule-based targeting by filename, page URL, class, and more.', 'optimole-wp' ),
 				'compression_mode'               => __( 'Compression Mode', 'optimole-wp' ),
 				'compression_mode_speed_optimized'                => __( 'Speed Optimized', 'optimole-wp' ),
 				'compression_mode_quality_optimized'              => __( 'Quality Optimized', 'optimole-wp' ),

From 854d52aefc932ecbbd1e89850e851485e2a71355 Mon Sep 17 00:00:00 2001
From: RaduCristianPopescu
 <119046336+RaduCristianPopescu@users.noreply.github.com>
Date: Fri, 26 Sep 2025 10:32:27 +0300
Subject: [PATCH 2/3] chore: copilot suggestions

---
 .../parts/connected/settings/Watermark.js        | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/assets/src/dashboard/parts/connected/settings/Watermark.js b/assets/src/dashboard/parts/connected/settings/Watermark.js
index 3a5d1a3e2..6b27a2dd8 100644
--- a/assets/src/dashboard/parts/connected/settings/Watermark.js
+++ b/assets/src/dashboard/parts/connected/settings/Watermark.js
@@ -32,19 +32,19 @@ const Watermark = () => {
 				<div className="mb-4 space-y-2">
 					<div className="flex items-center gap-2 align-center">
 						<div className="w-2 h-2 bg-gray-900 rounded-full flex-shrink-0"></div>
-						<span className="text-gray-700 text-center">{options_strings.watermark_info_1}</span>
+						<span className="text-gray-700 text-left">{options_strings.watermark_info_1}</span>
 					</div>
 					<div className="flex items-center gap-2 align-center">
 						<div className="w-2 h-2 bg-gray-900 rounded-full flex-shrink-0"></div>
-						<span className="text-gray-700 text-center ">{options_strings.watermark_info_2}</span>
+						<span className="text-gray-700 text-left ">{options_strings.watermark_info_2}</span>
 					</div>
 					<div className="flex items-center gap-2 align-center">
 						<div className="w-2 h-2 bg-gray-900 rounded-full flex-shrink-0"></div>
-						<span className="text-gray-700 text-center">{options_strings.watermark_info_3}</span>
+						<span className="text-gray-700 text-left">{options_strings.watermark_info_3}</span>
 					</div>
 				</div>
 
-				<div className="flex gap-4">
+				<div className="flex gap-4 mb-4">
 					<Button
 						variant="primary"
 						className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium flex items-center gap-2 hover:bg-blue-700"
@@ -61,16 +61,16 @@ const Watermark = () => {
 					<Button
 						variant="secondary"
 						className="border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-50"
-						target='_blank'
-						rel='noopener noreferrer'
+						target="_blank"
+						rel="noopener noreferrer"
 						href="https://docs.optimole.com/article/1475-adding-watermarks-to-your-images"
 					>
 						{options_strings.learn_more}
 					</Button>
 				</div>
-				<p className="text-gray-500" style={{ gap: 0 }}>
+				<span className="text-gray-500">
 					{options_strings.watermark_footer}
-				</p>
+				</span>
 			</div>
 		</>
 	);

From f5636ef55dce20fa76468ce2ed2db5e2275f8047 Mon Sep 17 00:00:00 2001
From: RaduCristianPopescu
 <119046336+RaduCristianPopescu@users.noreply.github.com>
Date: Fri, 26 Sep 2025 10:44:26 +0300
Subject: [PATCH 3/3] chore: copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 inc/admin.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/inc/admin.php b/inc/admin.php
index ba7bd5362..eb651434b 100755
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -1714,7 +1714,7 @@ private function get_dashboard_strings() {
 				'watermark_media_title'          => __( 'Watermarks', 'optimole-wp' ),
 				'learn_more'                      => __( 'Learn more', 'optimole-wp' ),
 				'open_optimole_dashboard'         => __( 'Open Optimole Dashboard', 'optimole-wp' ),
-				'watermark_footer'      => __( 'Watermark rules and exclusions are fully managed in your Optimole Dashboard.', 'optimole-wp' ),
+				'watermark_footer'                => __( 'Watermark rules and exclusions are fully managed in your Optimole Dashboard.', 'optimole-wp' ),
 				'watermark_info_1' => __( 'Choose from multiple watermark positions and set opacity.', 'optimole-wp' ),
 				'watermark_info_2' => __( 'Set different watermarks for different image sizes.', 'optimole-wp' ),
 				'watermark_info_3' => __( 'Create rule-based targeting by filename, page URL, class, and more.', 'optimole-wp' ),